In this tutorial, we will help you learn more on mouse over / rollover effects that can be created with CSS.
Final output:
The steps followed to obtain the above result are given below:
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;
}
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;
}
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;
}
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;
}
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
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
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
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.
To make best of your learning, check our work. It should give you some inspiring ideas on what you can try next.
You can also write to me at jayanthi at imajineweb dot com.
Thank you so much for taking time and going through this tutorial, Hope it has been helpful to you.
Are you creating animated gifs in tools like Photoshop / Fireworks and wondering why you have not been able to create that smooth easing effect despite of so much hard…
Read More