How to Make an Awesome Hover Over Image Effect

There are so many examples of hover over image effects on the web and each of them could be unique in their own way. There is no end to how creative you can get when it comes to developing your own hover over images.

Here is my personal favorite hover over image that I will be showing you how to make for your own website or blog. Click the “View Demo” button to see this awesome hover over image in action.

I am going to assume that you had a look at the demo. I am also going to assume that you have a basic understanding of HTML and CSS documents.

When you hovered over the image it changed from the dull grey box on the left to the light blue box with my icon inside it on the right, along with some highlighted text which changed its font colour from grey to white.

You may also have noticed that my logo on the right slid down from the top of the image whilst the hover over was making its transition. Which gave it a really neat hover over effect..

Before and After Hover Over Image

The first thing we need to do is write out the HTML code we are going to use for our hover over. This part is very simple.

Open up your HTML editor or notepad. Give your document a type as usual, for example a HTML 5 document type would be <!DOCTYPE html> which you should know if you are familiar with HTML documents.

Create the head section of your HTML document and the code we will be using for our hover over. Or just copy and paste the code below.


<head>
	<meta charset='UTF-8'>
	
	<title>Awesome Hover Over Image </title>
	
	<link rel='stylesheet' href='hover.css'>
	
</head>

<a id="devhov" class="greybox">
<h1>develop-a-website.com</h1>
<p>Any text you want to highlight would go here..</p>
</a>

That is all the HTML code we are going to need for the hover over effect, the rest is done by CSS.

What the code above does is assigns your HTML document to a style sheet, creates a link which will be the hover over and assigns a CSS class so you can style the box and the hover over.. Plus the heading and the paragraph attributes. You should know this if you are familiar with CSS, but if you’re not that’s a brief breakdown of the code above.

Once your done, save the document and upload it to your FTP.

Now we are going to create the stylesheet “hover.css” which we linked up with the HTML document. So create a new file in your editor and add the following code.


.greybox {
    background: none no-repeat scroll 320px 50% #d9d9d9;
    color: #999999;
    display: inline-block;
    height: 135px;
    margin: 0 0 10px;
    padding: 15px;
    text-decoration: none;
    transition: all 0.2s ease 0s;
    width: 250px;
}

.greybox:hover { 
background-position: 200px 50%; 
color: #fff;
}

.greybox p {  font-size: 14px; font-family: Arial, sans-serif; width: 152px; 

}


#devhov {
    background-image: url("http://www.develop-a-website.com/wp-content/themes/nest
/images/hoverover-test.png");
    background-position: 290px -1288px;
}

#devhov:hover { 
background-color: #29ABE2;
background-position: 162px 40px;

} 


h1 { 
font-size: 14px; 
font-family: Verdana, sans-serif; 
} 

There you have your CSS code for the roll over image. It’s pretty basic code and I will explain to you the most important elements.

First off the CSS class “.greybox” is used to style the grey box which is pretty obvious. You add the background attributes, the width of the box, the height and most importantly the transition. The transition attribute is what you are using to get the right speed of the slide down effect from the logo when your roll over the image. Play around with it and you will see what I am talking about.

The #devhov attribute is used to call the image and to position the image away from the box. If you look at the #devhov section in the CSS I have used “background-position” to position the logo off the screen but off and above, so that when someone hovers over the image the logo drops down from above. If I had positioned it off the screen from the right hand side then the logo would of slid in from the right.. Try it yourself, adjust the pixels in the background-position of the #devhov ID and see what happens when you roll over the image.

The #devhov:hover ID basically tells the logo where to land on the image and adds the background color to the image also. You can adjust these to best fit your needs.

“.greybox p” lets you add colour, font size and a font family to the text in the greybox.. You add your changing colour to the greybox:hover ID, in this case I added the colour code for white as the changing colour “#fff”.

There you have a neat hover over image effect for your website or blog to highlight specific content. Thanks for reading.

A cool effect too is changing the greybox to a white box, try that out and check out your results.

One minor problem with this tutorial is that is isn’t cross browser compatible, you do not get the transition effect in some browsers. You still get the hover over just not the sliding down transition which sucks, maybe it will be soon..

Author: Jake

Share This Post On