如何獲取文本出現在頂部圖片的懸停

Question

我在這一點上，在那裏，如果你在像懸停，不透明度變輕：

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

Answer 1

改變一些display屬性。

此外，更改.img__description_layer類中的left: 50%;類，如果您希望文本只顯示在圖像的一半部分。

如果你想在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>