Amazing CSS3 Image Hover Over Boxes Tutorial

When I put together the slick circular css3 navigation menu. I told myself I would come back to it and create some more CSS3 hover overs. I kept my own promise and in this tutorial I will be showing you how to create these amazing CSS3 image hover over boxes using the new CSS3 properties, transition and transform.

These hover over boxes could be used to highlight a number of elements on your own website. You are free to download the source code and customize them however you wish. Also, by all means post your link in the comments with your own examples.

Remember that CSS3 is not a full standard and not every browser is fully supportive. That being said, a majority of them do support CSS3 using the webkits etc, which can be found in this code. I have not tested this on any of the old browsers, but I have tested this on the latest versions of Firefox, Chrome, Safari and Opera. Where it works perfectly..

The Final Result

Lets take a look at a live demo of these CSS3 image hover over boxes.

Live Demo | Download

CSS3 Image Hover Over Boxes Tutorial

What did you think? Your feedback is appreciated.

As you can see each box has the same css3 image hover over effect. Which changes from the grey light box to a colorful blue box. Then replacing the existing icon with a logo and a brief title, which is actually hidden in white on the original box.

The icon dimensions inside the boxes and the hover over logo are all at 120px by 120px.

Now lets take a look at the mark up.

The HTML Markup

<ul class="custom-menu"> 
	<li>	
		<a href="#">
			<div class="content"> 
			<h2 class="link">Learn HTML</h2>
			<h3 class="secondary">The Basics</h3> 
			<p class="info"><img src="images/icon-html.gif" /></p>
			<img class="icon" src="images/icon.png" />
			</div>
		</a> 
	</li> 
	
	
<li class="custom-menu1">	
		<a href="#">
			<div class="content"> 
			<h2 class="link">Programming</h2>
			<h3 class="secondary">Web Development</h3> 
			<p class="info"><img src="images/icon-prog.gif" /></p>
			<img class="icon" src="images/icon.png" />
			</div>
		</a> 
	</li> 



<li class="custom-menu2">	
		<a href="#">
			<div class="content"> 
			<h2 class="link">eCommerce</h2>
			<h3 class="secondary">Sell Online</h3>
			<p class="info"><img src="images/icon-ecom.gif" /></p>
			<img class="icon" src="images/icon.png" />			
			</div>
		</a> 
	</li> 



<li class="custom-menu3">	
		<a href="#">
			<div class="content"> 
			<h2 class="link">Content</h2>
			<h3 class="secondary">Write Something</h3> 
			<p class="info"><img src="images/icon-cont.gif" /></p>
			<img class="icon" src="images/icon.png" />
			</div>
		</a> 
	</li> 	

</ul> 

It’s not a complex HTML markup. In fact it’s very simple. We have an unordered list (ul) and links for each image hover over. We then have a div class for all of the content, a header for the main link and a secondary header for the sub title. Then we have some paragraph tags where I have added the image of each icon. At the end we have the logo image which appears when the hover over takes effect.

You now have a brief breakdown of the HTML. I will be explaining this markup more in the CSS section.

The CSS

 
.custom-menu {
margin: 90px auto;  
height: 400px; 
width: 76%
} 


.custom-menu li { 
width: 250px;
height: 300px;
overflow: hidden;
position: relative;
float: left;
background: #fff;
margin: 20px; 
border: 5px solid #e3e3e3;
border-radius: 10px; 
transition: 500ms; 
-webkit-transition: 500ms; /* Safari & Chrome */
-o-transition: 500ms; /* Opera */ 
-moz-transition: 500ms; /* Old firefox */

} 

.custom-menu li a { 
text-align: center; 
text-decoration: none; 
} 


.custom-menu li:hover {
border: 5px solid #29abe2;
background-color: #014B67;
 
} 


.content { 
margin-top: 32px; 
} 


.link { 
font-size: 27px; 
color: #29ABE2;   
transition: 500ms; 
-webkit-transition: 500ms;  /* Safari & Chrome */
-o-transition: 500ms;   /* Opera */ 
-moz-transition: 500ms;  /* Old firefox */
}

.custom-menu li:hover .link {
color: #fff; 
font-size: 34px; 
}

.secondary { 
color: #fff; 
transition: 500ms;
-webkit-transition: 500ms; /* Safari & Chrome */
-o-transition: 500ms; /* Opera */ 
-moz-transition: 500ms; /* Old firefox */
} 




.custom-menu li:hover .secondary { 
 background-color: #29abe2; 
 height: 30px; 
 padding-top: 4px; 
} 

.info { 
font-size: 18px; 
color: #014B67;
margin-top: -27px;  
padding: 14px; 
transition: 500ms;
-webkit-transition: 500ms; /* Safari & Chrome */ 
-o-transition: 500ms; /* Opera */ 
-moz-transition: 500ms; /* Old Firefox */ 
 

} 

.custom-menu li:hover .info {
transform: translateX(-400px) rotate(360deg); 
-webkit-transform: translateX(-400px) rotate(360deg); /* Safari & Chrome */
-o-transform: translateX(-400px) rotate(360deg);  /* Opera */
-moz-transition: translateX(-400px) rotate(360deg);  /* Old Firefox */ 

}


.icon { 
transition: 500ms; 
-webkit-transition: 500ms; /* Safari & Chrome */  
-o-transition: 500ms; /* Opera */ 
-moz-transition: 500ms; /* Old Firefox */ 
transform: translate(-400px) rotate(360deg);
-webkit-transform: translate(-400px) rotate(360deg); /* Safari & Chrome */ 
-o-transform: translate(-400px) rotate(360deg); /* Opera */ 
-moz-transform: translate(-400px) rotate(360deg); /* Old Firefox */ 


} 

.custom-menu li:hover .icon {
transform: translateY(-135px) rotate(0deg); 
-webkit-transform: translateY(-135px) rotate(0deg); /* Safari & Chrome */ 
-o-transform: translateY(-135px) rotate(0deg); /* Opera */
-moz-transform: translateY(-135px) rotate(0deg); /* Old Firefox */ 

} 






/* Colors */ 
li.custom-menu1:hover { 

}



li.custom-menu2:hover { 
} 



li.custom-menu3:hover {

} 


li.custom-menu4:hover { 


}

As you may have noticed I have left some CSS hover classes empty. I left these classes empty in case you decided that you would like each hover box to have its own separate styling. Change the background colors etc.

Here is a large breakdown of the CSS code and what the styling properties are actually doing. I know it’s a lot of information, but this way you can understand exactly what the CSS is doing.

.custom-menu Here I have applied the width and the height of the unordered list and centering with the margin.

.custom-menu li This is where I have created the main shape of the boxes by choosing the dimensions. I used float:left to float the elements to the left. I created a 5px grey border and used border-radius to round the corners off. This is also where I chose the background color and applied a transition of 500ms. Which is the duration of the hover over boxes.

.custom-menu li a This is where I centered the text and disabled the default underlining of the links.

.custom-menu li:hover In this class you can apply all the hover over effects or use the empty classes for separate hover overs. You do not need to apply the transition here because it has already been set in the .custom-menu li .

.content If you want to adjust the position of the content. This is where you would make those changes.

.link This is where I have applied a transition of 500ms for the main heading. I have also set the color of the text to #29aeb2, and set the font-size to 27px.

.custom-menu li:hover .link This is the hover over for the above class. I have added a changing color of white and adjusted the font size to a larger font when changing.

.secondary Here I have disguised the sub heading into the white background of the boxes. I just set the font color to white so that when the blue background comes into play, it makes the text stand out. I also added a transition in.

.custom-menu li:hover .secondary This is the hover over for the sub heading. I added a small 30px background bar behind the text with the color of #29abe2. I also added a padding of 4px to some what center the text.

.info This is the paragraph class for the symbols. I used a paragraph tag in the HTML as oppose to an image tag. The reason why I did this was because in case you decide that you want to add text to the hover over boxes instead of symbols. But remember that the text needs to be a similar height or it will adjust the position of the icon hover over. For the CSS I applied a transition and font styling for the text. I also added a margin to adjust the position of the icons.

.custom-menu li:hover .info This is an important part of the hover over. I used “transform: translateX(-400px) rotate(360deg); ” to push the icon off the screen by -400px and I also added a rotate 360 deg. Which gives it a spinning effect as it comes on and off the screen.

.icon In the icon class I used the exact same transform property. Except I applied it to the starting element, which positions the element of the screen. I also added the rotate(360deg) to give it a spinning effect as it comes back into a viewable area.

.custom-menu li:hover .icon This is the hover over class for .icon where I have used translateY(-135px) to position it where I want. I then added rotate(0deg) to spin it up right, when it hovers onto the screen.

And that’s about everything.. I know it’s a detailed explanation but I wanted you to understand exactly how it’s working.

Thanks for reading!

Sign On Up..

Enjoyed this tutorial? Please consider signing up to our newsletter by entering your email address in the form below. You will receive our recent blog updates, our exclusives, top resources and latest web trends all in your inbox. We value your privacy and will not re-distribute your email address. Plus no spam!

Author: Jake

Share This Post On
  • ankit parmar

    nice

    • http://www.develop-a-website.com/ Jake

      Thanks Ankit!

  • http://www.facebook.com/Infomad50 Kevin Chilton

    Really cool. Nice work

    • http://www.develop-a-website.com/ Jake

      Thanks for the feedback Kevin.. Did you have a chance to implement it on your own site?

  • http://www.facebook.com/sijalupangna Eyang Anom Al-Bantani

    Good job jake, I’ll alwasy wait for your amazing tutorial. Thanks..

    • http://www.develop-a-website.com/ Jake

      Thanks Eyang! I appreciate it. I will be adding a new CSS3 tutorial in the up coming week or so. So stay tuned!