Multiple type of image hover / mouse rollover effect in CSS3

In this tutorial, we will help you learn more on mouse over / rollover effects that can be created with CSS. We are hoping that you have gone through our previous tutorial on Thumbnail image display with zoom and glow effect on rollover before continuing with this one.

Final output:

image rollover effect

image rollover effect

image rollover effect

image rollover effect

image rollover effect

image rollover effect

The steps followed to obtain the above result are given below:

  1. In the first step, we assign a common container for the gallery to contain all the images.The dimensions would vary depending on the size of your images. Here the container div used was:
    #div_img
    {
    width:700px;
    height:450px;
    }
  2. In the second step, we assign separate placeholders for our images. The style for which is shown below:

    .img
    {
    float:left;
    -webkit-transition-duration: 0.5s;
    }

    NOTE: The ' -webkit-transition-duration' is the time alloted / taken for any transition, like for example - zoom in and zoom out / glow effect.

    The padding and border style for images

    .img img
    {
    padding:10px;
    border:1px solid #fff;
    }
  3. In the third step, we give hover effect to our images. Here the image size is zoomed and has a glow effect on rollover which is common for all images.The code for which is
    .img:hover
    {
    -webkit-transform:scale(1.2);
    -webkit-box-shadow:0px 0px 30px #ccc;
    }
  4. In the fourth step, we assign style for the translucent mask as:
    .mask
    {
    width: 100%;
    background-color: rgb(0, 0, 0);
    position: absolute;
    height: 100%;
    opacity:0.4;
    cursor:pointer;
    -webkit-transition-duration: 0.5s;
    display:inline;
    float:left;
    }
  5. In the last step, we give hover effect to the mask. These are the six different effects that we have shown in this tutorial. Now we shall separately look into each of these effects.

The first effect is shown below, followed with explanation for the same

image rollover effect

Syntax for the above rollover effect -

#img-1
{
margin:30px;
width:172px;
height:152px;
float:left;
position:relative;
display:inline;
}

#img-1:hover .mask
{
width:0%;
}

Explanation:

The above code gives a hover effect, in which the mask would disappear horizontally, on mouse rollover, thus making width 0%.

The second effect is shown below, followed with explanation for the same

image rollover mask effect

Syntax for the above rollover effect -

#img-2
{
margin:30px;
width:172px;
height:152px;
float:left;
position:relative;
display:inline;
}

#img-2:hover .mask
{
height:0%;
}

Explanation:

Here the height assigned is 0% on hover, which is why the mask disappears vertically making height 0% on rollover.

The third effect is shown below, followed with explanation for the same

image rollover mask effect

Syntax for the above rollover effect -

#img-3
{
margin:30px;
width:172px;
height:152px;
float:left;
position:relative;
display:inline;
}

#img-3 #mask-1
{
width:50%;
background-color: rgb(0, 0, 0);
position: absolute;
height: 100%;
opacity:0.6;
cursor:pointer;
-webkit-transition-duration: 0.5s;
}

#img-3 #mask-2
{
width:50%;
margin-left:212px;
background-color: rgb(0, 0, 0);
position:absolute;
height: 100%;
opacity:0.6;
cursor:pointer;
-webkit-transition-duration: 0.5s;
float:left;
display:inline;
}

Explanation:

As you can see, in this case we have used 2 masks, width assigned to both these two masks is 50%. For the first mask we need not give any margin and it extends till the 50% width of the image. For the second mask, we assign a left-margin, such that the margin is almost equal to 50% of the image so that it is located in the center.

Next, rollover effect to these masks

#img-3:hover #mask-1
{
width:0%;
}

#img-3:hover #mask-2
{
margin-left:211px;
width:0%;
}

Explanation:

As obvious from the above code, the two masks would reduce in size horizontally, making the width of the mask 0% on hovering / rollover.

The fourth effect is shown below, followed with explanation for the same

#img-4
{
margin:30px;
width:172px;
height:152px;
float:left;
position:relative;
display:inline;
}

#img-4:hover .mask
{
margin-left:86px;
margin-top:76px;
height:0%;
width:0%;
}

Explanation:

Here we have assigned the left and right margins, which are the centre points of the image, as we want the mask to reduce in size and disappear centrally.

The fifth effect is shown below, followed with explanation for the same

Syntax for the above rollover effect -

#img-5
{
margin:30px;
width:172px;
height:152px;
float:left;
position:relative;
display:inline;
}

#img-5:hover .mask
{
margin-left:86px;
margin-top:76px;
height:0%;
width:0%;
-webkit-transform: rotateX(360deg);
}

Explanation:

Here too, the mask disappears centrally, but while reducing its size, it also rotates on the X-axis by 360 degrees.

Now we move onto our sixth and the last effect for which the image and description is given below

The placeholder for the above image was assigned as:

#img-6
{
margin:30px;
width:172px;
height:152px;
float:left;
position:relative;
display:inline;
}

#img-6:hover .mask
{
height:0px;
width:0px;
margin-left:86px;
margin-top:76px;
-webkit-transform: rotateZ(360deg);
}

Explanation:

In this hover effect, the mask reduces in size to disappear centrally, but it rotates along the Z-axis.The value of degrees can be assigned as you wish.

The HTML code for the effect is given below:

<div id="div_img">

<div class='img' id='img-1'>
<div class='mask'></div>
<a href="#" target="_blank"><img src="img_gal_1.jpg" /></a>
</div>

<div class='img' id='img-2'>
<div class='mask'></div>
<a href="#" target="_blank"><img src="img_gal_2.jpg" /></a>
</div>

<div class='img' id='img-3'>
<div class='mask' id='mask-1'></div>
<div class='mask' id='mask-2' style="left: -126px;"></div>
<a href="#" target="_blank"><img src="img_gal_3.jpg" /></a>
</div>

<div class='img' id='img-4'>
<div class='mask'></div>
<img src="img_gal_4.jpg" />
</div>

<div class='img' id='img-5'>
<div class='mask'></div>
<img src="img_gal_5.jpg" />
</div>
<div class='img' id='img-6'>
<div class='mask'></div>
<img src="img_gal_6.jpg" />
</div>

</div>

With this we come to the end of this tutorial. Hope you found it both interesting and easy.

Do you wish to contribute a tutorial?

Contribute an unique and quality CSS3 / HTML5 tutorial.

Send in your tutorial in word doc, along with your short bio and profile picture to reachout@imajineweb.com. If your tutorial qualifies, we shall publish on Imajine and provide a link to your page.