在懸停時顯示顏色疊加的鏈接中的圖像

我需要在鏈接中創建圖像，並且應該在懸停時顯示一個顏色疊加層，其中的文本位於死點中。但我不知道如何。我知道如何在圖像上製作一個簡單的顏色疊加層，但是如何在一個img中做到這一點？在懸停時顯示顏色疊加的鏈接中的圖像

這是我的代碼到目前爲止，你可以看到，這不是我想要的。有人能幫我解決這個問題嗎？

.img-overlay img { 
 
    position: relative; 
 
    } 
 
.overlay { 
 
    display: none; 
 
    position: absolute; 
 
    color: #fff; 
 
    top: 0; 
 
    bottom: 0; 
 
    right: 0; 
 
    left: 0; 
 
    width: 100%; 
 
    height: 100%; 
 
    background-color: rgba(41,42,44,0.5); 
 
} 
 
.img-overlay { 
 
    position: relative; 
 
} 
 
.img-overlay:hover .overlay { 
 
    display: block; 
 
    }

<div class="img-overlay"> 
 
    <img src="https://placehold.it/350x150"> 
 
    <div class="overlay"> 
 
    <span>TITLE</span> 
 
    </div> 
 
</div>

我的形象需要有一個裏面，所以它的點擊，並導致地方。我怎樣才能做到這一點？

來源

2017-05-25 hemoglobin

爲什麼不直接使用的背景圖像對我們的健康？ – garek007

_「我的圖像需要放在一個」 - 所以，首先用'a'替換外部的'div' ...並且在所有可想象的情況和組合中通過CSS對齊東西是一個已經討論過的話題大體上已經知道你應該能夠通過一點研究來解決這個問題。 – CBroe

我會使容器inline-block所以它適合於圖像的大小，圖像設置爲vertical-align: top所以在底部的白色空間消失，然後用display: flex; align-items: center; justify-content: center;的覆蓋容器上居中的內容。

.img-overlay img { 
 
    position: relative; 
 
    vertical-align: top; 
 
} 
 

 
.overlay { 
 
    display: none; 
 
    position: absolute; 
 
    color: #fff; 
 
    top: 0; 
 
    bottom: 0; 
 
    right: 0; 
 
    left: 0; 
 
    background-color: rgba(41, 42, 44, 0.5); 
 
    justify-content: center; 
 
    align-items: center; 
 
} 
 

 
.img-overlay { 
 
    position: relative; 
 
    display: inline-block; 
 
} 
 

 
.img-overlay:hover .overlay { 
 
    display: flex; 
 
}

<a class="img-overlay"> 
 
    <img src="https://placehold.it/350x150"> 
 
    <div class="overlay"> 
 
    <span>TITLE</span> 
 
    </div> 
 
</a>

您也可以切換上:hoveropacity這樣你就可以transition的變化。

.img-overlay img { 
 
    position: relative; 
 
    vertical-align: top; 
 
} 
 

 
.overlay { 
 
    display: flex; 
 
    position: absolute; 
 
    color: #fff; 
 
    top: 0; 
 
    bottom: 0; 
 
    right: 0; 
 
    left: 0; 
 
    background-color: rgba(41, 42, 44, 0.5); 
 
    justify-content: center; 
 
    align-items: center; 
 
    opacity: 0; 
 
    transition: opacity .25s; 
 
} 
 

 
.img-overlay { 
 
    position: relative; 
 
    display: inline-block; 
 
} 
 

 
.img-overlay:hover .overlay { 
 
    opacity: 1; 
 
}

<a class="img-overlay"> 
 
    <img src="https://placehold.it/350x150"> 
 
    <div class="overlay"> 
 
    <span>TITLE</span> 
 
    </div> 
 
</a>

來源

2017-05-25 23:29:52

哦！這很有道理！最後。謝謝你，邁克爾。我剛剛用一個a替換了第一個div，就是這樣。再次，謝謝！ – hemoglobin

@血紅蛋白哦，我錯過了那部分關於你想要它成爲一個鏈接。是的，只是改變標籤應該工作。更新我的答案以反映這一點。歡迎您:) –

在懸停時顯示顏色疊加的鏈接中的圖像

回答

相關問題