Opacity Hover Effect

This is a nice hover effect you can use for your images. It is pretty simple. You have to create a div class to use for your image. I am going to call it imgopacity. Now you have to add it to your style.css and customize it as below (you can change the opacity values as well as time values):

.imgopacity{
overflow:hidden;
opacity: 0.5;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}

.imgopacity:hover{
opacity: 1;
}

It is important to know the fact that the maximum opacity is 1. So if you want to make your picture transparent you have use a value below 1 like 0.5.
The first line of codes are the duration of your transition. You can change the time depending on how fast you want your image to transform to a brighten one. I will keep mine to 1s. I want my image to be transparent and after that go to it’s initial opacity so I will set the opacity to 0.5 and when I hover it I want to go back to normal so I set the opacity to 1%. Now you have to add the div class to your image code:

<img src=”URL HERE” class=”imgopacity” />

And that’s all. Here is how mine looks out: