我確信這是一個簡單的修復，但無法理解我做錯了什么。我試圖顯示“標題文本”并減少圖像懸停時圖像的不透明度。我降低了圖像不透明度，但除非直接懸停文本，否則似乎無法顯示文本。任何幫助，將不勝感激！謝謝#work { .items { display: grid; grid-template-columns: repeat(2, 1fr); grid-gap: 1rem; .item { position: relative; background: $dark-color; // overflow: hidden; &:after { content: ''; position: absolute; display: block; background: inherit; opacity: 0; top: 0; left: 0; width: 100%; height: 100%; } // bring in main color overlay &:hover:after { opacity: 0.3; } &-text { position: absolute; top: 50%; left: 0; bottom: 0; right: 0; opacity: 0; text-align: center; z-index: 1; color: #fff; } // bring in text on hover &-image:hover &-text { opacity: 1; } &-image:before { content: ''; display: block; padding-top: 75%; overflow: hidden; } &-image img { position: absolute; top: 0; left: 0; width: 100%; height: auto; line-height: 0; } } }
2 回答
至尊寶的傳說
TA貢獻1789條經(jīng)驗 獲得超10個贊
我認為你可以將圖像和文本包裝在 div 中：
<div class="wrapper">
<img src="image.jpg">
<p>Your Title</p>
</div>
<style>
.wrapper {
position: relative;
overflow: hidden;
}
.wrapper img {
display: block;
max-width: 100%;
line-height: 0;
}
.wrapper p {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
opacity: 0;
z-index: 2;
}
.wrapper:hover img {
opacity: 0.6;
}
.wrapper:hover p {
opacity: 1;
}
</style>
qq_笑_17
TA貢獻1818條經(jīng)驗 獲得超7個贊
如果我理解正確的話，你想要做的事情不能僅用 HTML/CSS 來完成。您必須使用 JavaScript 才能達到這樣的效果。
下面是一個使用 jQuery 的示例，它在懸停時將 .darken 類添加到 .item 中。如果不重寫代碼，這在您的情況下將不起作用，但您明白了。您當然可以在這兩個函數(shù)中添加任何內容：
<script>
(function(){
jQuery(".item").hover(
function() {
jQuery(this).addClass('darken');
}, function() {
jQuery(this).removeClass('darken');
}
);
})();
</script>
- 2 回答
- 0 關注
- 147 瀏覽
添加回答
舉報
0/150
提交
取消