How to give opacity Hover effect in img’s?

Question

I’d like to know how you put the Hover effect on the images of this site http://digitaltheme.co/html/admag/demo/index.php.

Answer 1

You can simply put a dark background and give opacity to the image when passing the mouse that will give this effect. An example would be like this:

.darken {
    display: inline-block;
    background: black;
    padding: 0;
}


.darken:hover img {
    opacity: 0.7;      
}
.darken img {
    display: block;
    
    -webkit-transition: all 0.5s linear;
       -moz-transition: all 0.5s linear;
        -ms-transition: all 0.5s linear;
         -o-transition: all 0.5s linear;
            transition: all 0.5s linear;
}

<a href="http://google.com" class="darken">
    <img src="http://www.prelovac.com/vladimir/wp-content/uploads/2008/03/example.jpg" width="200">
</a>

Where I’m putting the dark background with this code:

.darken {
        display: inline-block;
        background: black;
        padding: 0;
    }

If you want to better understand how it works, change this line background: black; for another color, for example: background: blue; that will turn blue instead of black.

And when passing the mouse, setting its opacity, in this part:

.darken:hover img {
        opacity: 0.7;      
    }

The last part is only for transition.

Source: ONLY