PSD-HTML. These Pixel perfect HTML pages will be tested on Chrome, Firefox, IE, Safari on OS X and Windows Imajine will help you create your own fan page in facebook with an eye appealing graphic banner for its welcome page Custom CMS theme building weboranje.com - showcase of inspirational web 2.0 websites
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:

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

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.

Tags: Pure CSS rollover effect

 

Bookmark and Share
HI, AM JAY, AND I IMAJINE
I am a freelance web designer and web application developer with over 7 years of result oriented experience. I am accustomed to working in a dynamic and goal oriented client environment. My strengths include the ability to visualize, personalize and create a truly unique and enthralling web presence. My passion apart from web design, logo design, Flash animation / actionscripting, CMS Customization, print and web development includes photography, game programming, tutorial development (includes Adobe Flash, Adobe Fireworks and Adobe Photoshop) and blogging.
Read more about me...
CONTACT US
Name :  
Email Address :  
 
Comments :
 
jayanthi.varma@imajine.in  |  © 2008 - 2012 Imajine.