How to use opacity on image hover?

Question

When I use the opacity on image hover. It only getting lighter or dimmer but not darker.

I have tried to increase the number of opacity to make it darker, but not success. Below is the code block that I have tried to make the image become darker on hover:

<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 I expect the image will become darker on hover.

Expected result

You're removing opacity of a picture it's always going to be lighter if you're backfground is light colored. try adding a black div with the desired opacity right above it and show it when hovering. — fedesc, Apr 20 '19 at 10:03
Why would it be darker when background is white? It would be darker if the background would be black. — Flash Thunder, Apr 20 '19 at 10:12
Try this https://stackoverflow.com/questions/18322548/black-transparent-overlay-on-image-hover-with-only-css — hamid, Apr 20 '19 at 10:16

Chema · Answer 1 · 2019-04-20T10:27:12.773

They way to use opacity is by the other side you are trying. 1 opacity means that element is full opaque, "opacity: .5" means half opacity, so you will see you element half transparent and the color of the element behind the image and thats your result.

A quick, better and easy way to get that effect is using filter propierties of 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>

Here is the example at Codepen:

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

hope it helps you

score 0 · Answer 2 · answered Apr 20 '19 at 10:26

Style opacity = 0.5 will make the image become dimmer but not darker. To make the picture become darker on hover, we set the background div containing the picture to dark. Thus, when hovered the picture will dimmer and with the black background, it will make the picture looks darker.

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

In the code above, I just set the containing div with black background.

You can do it without adding any extra divs how i telled in my answer — Chema, Apr 20 '19 at 10:33

score 0 · Answer 3 · answered Apr 20 '19 at 10:58

On mouse hover use background-color: rgba(black, 0.5); instead of opacity: 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>

How to use opacity on image hover?

3 Answers3