如何在图像悬停时使用不透明度？

Question

当我在图像悬停上使用不透明度时。它只会变亮或变暗，而不会变暗。

我试图增加不透明度的数量，使其变暗，但不成功。下面是我试图使图像在悬停时变暗的代码块：

<style>
.category-product img {
    display: block;
    margin-left: auto;
    margin-right: auto
}

.category-product img:hover {
    opacity: 0.5;   
}
</style>
<div class="category-product">
    <img src="hinh/paris.jpg" data-img="product-image-1">
</div>

Image of opacity applied on my current try 我希望图像在悬停时会变暗。

Expected result

Answer 1

他们使用不透明度的方法是您尝试的另一面。 1 opacity表示元素是完全不透明的，“ opacity：.5”表示一半是不透明的，因此您将看到元素是半透明的，并且图像后面的元素的颜色也就是结果。

一种快速，更好，更容易获得这种效果的方法是使用CSS的过滤器属性。

<style>
.category-product img {
    display: block;
    margin-left: auto;
    margin-right: auto;
    transition: all .3s;/* I put this to get smooth transition */
}

// Then at hover, you can do a filter: brightness and set a lower value

.category-product img:hover {
   filter: brightness(0.4);
}
</style>

<div class="category-product">
    <img src="http://lorempixel.com/output/sports-q-c-640-480-7.jpg" data-img="product-image-1">
</div>

以下是Codepen中的示例：

https://codepen.io/ChemaAlfonso/pen/ROJNev

希望对您有帮助

Answer 2

样式不透明度= 0.5将使图像变暗，但不会变暗。为了使图片在悬停时变暗，我们将包含图片的背景div设置为暗。因此，当鼠标悬停时，图片将变暗并且具有黑色背景，这会使图片看起来更暗。

<style>
.category-product {
    background: black;
}

.category-product img {
    display: block;
    margin-left: auto;
    margin-right: auto
}

.category-product img:hover {
    opacity: 0.5;   
}
</style>
<div class="category-product">
    <img src="hinh/paris.jpg" data-img="product-image-1">
</div>

在上面的代码中，我只是将包含div的背景设置为黑色。

Answer 3

  

在鼠标悬停时使用background-color：rgba（black，0.5）;而不是不透明度：0.5;

<style>
    .category-product img {
        display: block;
        margin-left: auto;
        margin-right: auto
    }

    .category-product img:hover {
       background-color: rgba(black, 0.5);  
    }
    </style>
    <div class="category-product">
        <img src="hinh/paris.jpg" data-img="product-image-1">
    </div>