目前，当您将鼠标悬停在图片上时，不透明度会变浅：
https://jsfiddle.net/vo1npqdx/1268/
这是正确的，但现在我也想要一些链接文字出现在图像的顶部。我试着按照这个例子中的解决方案：
How to show text on image when hovering?
但是当我尝试这种技术时，图像下方会显示空白区域，文本不会显示在顶部，并且它不会居中于图像上方：
https://jsfiddle.net/vo1npqdx/1269/
我似乎无法弄清楚如何使段落文本显示在框阴影的顶部并使用CSS居中 - 任何建议？如果没有，那么如何用JavaScript完成？谢谢。
HTML：
<div class="row thumbnail-row">
<div class="my-work-image" id="margin-left-image">
<img class="thumbnail-image" src="/wp-content/themes/gatewaywebdesign/assets/images/hamburger-thumbnail.jpg"/>
<p class="initial-hidden">The Hamburger Collection</p>
</div>
<div class="my-work-image">
<img class="thumbnail-image" src="/wp-content/themes/gatewaywebdesign/assets/images/yoyomoi-thumbnail.jpg"/>
</div>
<div class="my-work-image">
<img class="thumbnail-image" src="/wp-content/themes/gatewaywebdesign/assets/images/dogs-thumbnail.jpg"/>
</div>
<div class="my-work-image">
<img class="thumbnail-image" src="/wp-content/themes/gatewaywebdesign/assets/images/gateway-thumbnail.jpg"/>
</div>
<div class="my-work-image">
<img class="thumbnail-image" src="/wp-content/themes/gatewaywebdesign/assets/images/chameleon-thumbnail.jpg"/>
</div>
<div class="my-work-image">
<img class="thumbnail-image" src="/wp-content/themes/gatewaywebdesign/assets/images/adrienne-thumbnail.jpg"/>
</div>
<div class="my-work-image">
<img class="thumbnail-image" src="/wp-content/themes/gatewaywebdesign/assets/images/castaway-thumbnail.jpg"/>
</div>
</div><!--end row-->
CSS：
.thumbnail-row {
display: flex;
}
.thumbnail-row div {
position: relative;
}
.thumbnail-row div::after {
content: '';
position: absolute;
top: 0; left: 0;
width: 100%;
height: 100%;
box-shadow: inset 0 0 0 3000px rgba(27,61,88,.5);
}
.thumbnail-image {
display: inline-block;
max-width: 100%;
}
.my-work-image:hover {
opacity: 0.5;
}
/*hidden text*/
.initial-hidden {
visibility: hidden;
text-align: center;
display: inline;
}
.my-work-image:hover .initial-hidden {
visibility: visible;
opacity: 1;
}
@media (max-width: 425px) {
.thumbnail-row {
flex-direction: column;
}
}
答案 0 :(得分：2)
更改部分display属性。
另外，如果您希望文字仅显示在图片的一半部分，请更改left: 50%;课程中的.img__description_layer。
如果您希望text位于图片的中心，只需删除css类.thumbnail-row div::after
.thumbnail-row {
display: flex;
}
.thumbnail-row div::after { /*remove this class to display the text in center of the image*/
content: '';
position: relative;
top: 0; left: 0;
width: 100%;
height: 100%;
box-shadow: inset 0 0 0 3000px rgba(27,61,88,.5);
}
.thumbnail-image {
display: inline-block;
width: 100%;
}
.my-work-image{
position:relative;
}
.img__description_layer {
position: absolute;
top: 0;
bottom: 0;
left: 0; /*change it to 50%, if you want the text only shows in the half part */
right: 0;
background: rgba(36, 62, 206, 0.6);
color: #fff;
visibility: hidden;
opacity: 0;
display: flex;
align-items: center;
text-align:center;
/* transition effect. not necessary */
transition: opacity .2s, visibility .2s;
}
.my-work-image:hover .img__description_layer {
visibility: visible;
opacity: 1;
}
.img__description {
transition: .2s;
transform: translateY(1em);
}
.my-work-image:hover .img__description {
transform: translateY(0);
}
@media (max-width: 425px) {
.thumbnail-row {
flex-direction: column;
}
}<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">
<div class="row thumbnail-row">
<div class="my-work-image" id="margin-left-image">
<img class="thumbnail-image" src="http://i.imgur.com/mNoKbYK.jpg" />
<div class="img__description_layer">
<span class="img__description">This image 1 looks super neat.</span>
</div>
</div>
<div class="my-work-image">
<img class="thumbnail-image" src="http://i.imgur.com/8b2sb03.jpg" />
<div class="img__description_layer">
<span class="img__description">This image 2 looks super neat.</span>
</div>
</div>
<div class="my-work-image">
<img class="thumbnail-image" src="http://i.imgur.com/Ac11pRH.jpg" />
<div class="img__description_layer">
<span class="img__description">This image 3 looks super neat.</span>
</div>
</div>
</div>
<!--end row-->
</div>
答案 1 :(得分：0)
这是我的建议：
/* fade out only the image, not the entire thing */
.my-work-image:hover img {
opacity: 0.5;
}
.initial-hidden {
visibility: hidden;
text-align: center;
display: inline;
line-height:1em;
/* use css transform to center vertically and horizontally */
-webkit-transform:translate(-50%,-50%);
-moz-transform:translate(-50%,-50%);
-ms-transform:translate(-50%,-50%);
transform:translate(-50%,-50%);
position:absolute; top:50%; left:50%;
color:#FFFFFF;
z-index:2;
}
答案 2 :(得分：0)
转换，背景，文字颜色等当然可以更改。
我建议在图像悬停（filter: blur(2px)）中添加.hoverable:hover img {}以使其看起来漂亮。只需确保将其与过渡相匹配。
我使用 flex 使文本居中，并在<p>元素上使用负位置来消除底部奇怪的空白区域。
编辑：我还修复了底部的奇怪空间而没有黑客攻击。只需将vertical-align: bottom;添加到图像中即可。
父级（.hoverable）的显示类型也可以在不引起问题的情况下进行调整。
这是一个JSFiddle，还有一些例子：https://jsfiddle.net/spikespaz/p4ogwee2/
.hoverable {
position: relative;
width: 400px;
overflow: hidden;
}
.hoverable img {
max-width: 100%;
max-height: 100%;
vertical-align: bottom;
}
.hoverable p {
position: absolute;
color: #fff;
display: flex;
align-items: center;
justify-content: center;
margin: 0;
top: 0;
left: 0;
right: 0;
bottom: 0;
opacity: 0;
transition: opacity 500ms;
font-size: 20px;
background: rgba(0, 0, 0, 0.5)
}
.hoverable:hover p {
opacity: 1;
}<div class="hoverable">
<img src="https://static.pexels.com/photos/39811/pexels-photo-39811.jpeg" alt="Road Image">
<p>This text will be shown on hover.</p>
</div>