圖像懸停顏色疊加

Question

我正在制作一個網站，其中有一個圖像，當懸停時，它有一個顏色覆蓋。 但不是那種顏色疊加，而是變成白色，網站的背景。

這是代碼：

<div class="col-md-6 col-sm-12">
<img src="images/about-img-2.jpg" class="img-responsive overlay" alt="about img 2">
</div>

和CSS：

.overlay:hover {
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 100%;
width: 100%;
opacity: 0;
transition: .5s ease;
background-color: rgba(0,0,0,0.23);
}

從這里開始

懸停時到此

抱歉，我無法嵌入不允許的圖像。

Answer 1

目前，您正在使用opacity: 0隱藏圖像本身。 你想要的是在圖像上覆蓋一個偽元素，如下所示：

 .overlay { position: relative; display: inline-block; background: cyan; display: inline-block; } .overlay > img { vertical-align: middle; } .overlay::before { content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: #000; opacity: 0; transition: .5s ease; } .overlay:hover::before { opacity: 0.23; }

 <div class="col-md-6 col-sm-12"> <span class="overlay"> <img src="http://via.placeholder.com/350x150" class="img-responsive" alt="about img 2"> </span> </div>

當圖像可見時，僅更改圖像的背景顏色將不起作用。 因此，為了有一個真正的疊加，我們需要實際創建一個疊加在該圖像之上的元素。

Answer 2

opacity: 0; 使其完全透明（即不可見）-因此您會看到網站的白色背景。 只需從hover狀態的 CSS 中刪除它（而不是從初始 CSS 中刪除）

Answer 3

嘗試這個，

 .container { position: relative; width: 50%; } .img { display: block; width: 100%; height: auto; } .overlay { position: absolute; top: 0; bottom: 0; left: 0; right: 0; height: 100%; width: 100%; opacity: 0; transition: .5s ease; background-color: #fff; } .container:hover .overlay { opacity: 0.7; }

 <div class="container"> <img src="http://via.placeholder.com/350x150" alt="about img 2" class="img"> <div class="overlay"> </div> </div>

Answer 4

這對我有用。

CSS（SCSS） ：

.img-wrap {
    height: 30vh;
    background-color: white;
    img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: all .25s;
        &:hover {
            opacity: .5;
        }
    }
}

HTML ：

<div class="img-wrap">
    <img src="@/images/village.jpg" alt="Galerie">
</div>

Answer 5

您可以根據您的項目需要多少模糊來更改“不透明度”。 這是您的示例的工作副本。 可以看到文字的懸停效果。（關於img2）

 .overlay:hover { top: 0; bottom: 0; left: 0; right: 0; height: 100%; width: 100%; opacity: 0.2; transition: .5s ease; background-color: rgba(0,0,0,0.23); }

 <div class="col-md-6 col-sm-12"> <img src="images/about-img-2.jpg" class="img-responsive overlay" alt="about img 2"> </div>