如何使用CSS將文本顯示在懸停時的圖像頂部

Question

當前，當您將鼠標懸停在圖像上時，不透明度會變淺：

https://jsfiddle.net/vo1npqdx/1268/

這是正確的，但現在我也希望一些鏈接文本也顯示在圖像頂部。 我嘗試在此示例中遵循解決方案：

懸停時如何在圖像上顯示文本？

但是，當我嘗試這種技術時，圖像下方會出現空白區域，文本不會顯示在頂部，也不會居中於圖像上方：

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;
    }
}

Answer 1

更改某些display屬性。

另外，將left: 50%;更改為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> 

Answer 2

這是我的建議：

/* 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;
}

https://jsfiddle.net/vo1npqdx/1272/

Answer 3

當然，可以更改轉場，背景，文本顏色等。

我建議在圖像懸停（ .hoverable:hover img {} ）上添加一個filter: blur(2px)使其看起來更漂亮。 只要確保您將其與過渡匹配即可。

我使用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>