Get our posts emailed to you with our monthly newsletter, subscribe here.

For this tutorial, you will need to make two images, one which is the normal state (ie. the image which will display on the page when the mouse isn’t hovered) and also a hover over state for when the mouse is. Here are the two images I am going to use (of my funky dog charlie)…

The left image is what a user will see when the page is loaded. This image has been dimmed, but you can do whatever you want with it, for example, you could desaturate the image to have a grayscale to colour effect. The right image is the original, as you can see both are 280px by 280px in size.

Right now we have these sorted, we will look at the code. First thing you need to do is display your image. The code below is a simple list containing one item. Inside this item, there is an image tag, which will be used to display the image in ‘normal state’. I have a hyperlink around the image tags, you will need to replace the hash (#) with the URL that you want the image to click through to. For this demo I have labelled the UL with a class of .img_list and the list item as .image_one. Finally, you will also see below that an empty span with the class of .rollover has been inserted between the A tags. This span essential, because this is what the jQuery uses to show the second ‘hover over’ image.

[php] <ul class="img_list">
<li class="image_one">
<a href="#"><img src="images/img_off.jpg" alt="" width="280" height="280" /></a>
</li>
</ul>
[/php]

Next, open your stylesheet and add the following…

[css] ul.img_list {
display:inline;
float:left;
height:280px;
list-style-image:none;
list-style-position:outside;
list-style-type:none;
}

li.image_one a {
display:block;
width:280px;
height:280px;
position:relative;
}

li.image_one a .rollover {
display:block;
position:absolute;
top:0;
left:0;
width:280px;
height:280px;
background:url(images/img_on.jpg);
}
[/css]

The CSS above sets the ‘hover over’ image as the background image on the span contained within the list item .image_one. This span is then floated directly on top of the ‘normal state’ image using absolute positioning. So if you load up your page now, you will see that you have a list item that contains two images, but you will only be able to see the image img_on.jpg.

Now we have these two images in place, we will use jQuery to do the effect. The first thing you must do and this is super important, is to include jQuery between your header tags! Without this the effect won’t work. If you are new to jQuery, then it is the same as including any JS file on your page, just use the following line of code…

[php] <script src="js/jquery-1.3.2.min.js" type="text/javascript"></script>
[/php]

The next block of code also needs to go between your header tags, and is what does the effect when the mouse is hovered over the image. We need to start of with the following line…

[javascript] $(document).ready(function(){
[/javascript]

All this does is checks to see the page is loaded before performing the lines of code that come below it. Next you will need to add the following…

[javascript] $(".rollover").css({‘opacity’:’0′});
[/javascript]

This is fairly obvious as to what it does, it assigns anything with the class rollover to have an opacity of 0%. Basically it hides the element with that class, so in this case, it will hide the span inside the list item. This will mean that when the page is loaded, the user will be left with the dimmed image, which is how we want it to be.

Next we need the following code, which will check for when the mouse cursor is hovering over our image…

[javascript] $(‘.img_list a’).hover(
function() {
$(this).find(‘.rollover’).stop().fadeTo(500, 1);
},
function() {
$(this).find(‘.rollover’).stop().fadeTo(500, 0);
});
[/javascript]

The functions above will only action when the mouse is hovered over any hyperlink within any item that has the class img_list assigned to them.

The first function deals with the over function, ie, when the mouse moves over the image, and once this occurs, the span which has previously been set to 0% opacity, is faded back in to show on screen. Now when the mouse moves off the images, the second function occurs, which sets this same span back to 0% opacity.

Here is the full block of code you should have in your header…

[php] <script type="text/javascript">
$(document).ready(function(){
//Set opacity on each span to 0%
$(".rollover").css({‘opacity’:’0′});

$(‘.img_list a’).hover(
function() {
$(this).find(‘.rollover’).stop().fadeTo(500, 1);
},
function() {
$(this).find(‘.rollover’).stop().fadeTo(500, 0);
}
)
});
</script>
[/php]

You should now have a working fade effect when you hover over your image. You can customize the fade effect to be quicker or slower as you wish and you can also set to what opacity the image fading in shows at. It is really easy to change the settings on the fade, I will briefly show you below…

[javascript] fadeTo(SPEED, OPACITY);
[/javascript]

The SPEED setting can be either a string or a number. String values are predefined and can be either “slow”, “normal”, or “fast”. Numerical values are displayed in number of milliseconds to run the animation (e.g. 1000).

The OPACITY value has to be a number between 0 and 1. You can also use decimal point, for example, 0.50 would be the same as 50% opacity. Below are two links which will explain the Hover and Fade effects in a bit more detail…

http://docs.jquery.com/Events/hover
http://docs.jquery.com/Effects/fadeTo

Thats the end of the Tutorial, any questions then please comment this post and I will get back to you asap. You can download the source files from this tutorial below, as well as a live demo.

Download Source Files (.zip) | Demo

Posted by Stu Greenham

Stu Greenham is a Web Designer / Developer who lives in Hull (North East England) and works for the web agency.

27 Comments

  1. The link for demo and zip file are no longer working.

    I added a span tag in the html to make it work for me…

    1. I’ll look into this and fix it.
      Thanks.

      Update: I have amended the files, you can now download and vew the demo!

      -David.

  2. “Finally, you will also see below that an empty span with the class of .rollover has been inserted between the A tags.”
    I don’t see the span tag in your HTML.

  3. Hey there, after searching the web for hours for a solution like this, your seems to be the only one that works in every browser (really great job!) – almost anyway…
    I’m having the same problem as Zak and Cat Lady – in IE (even Version 8) theres this ugly black border when using transparent pngs. Do you have any thoughts on how to fix this? Thanks!

    http://www.posch-dach.at/entwurf3/test.html

  4. you talk about the essential class rollover span, but it’s missing from the code example. also, a demo would be nice. that aside, great work and thanks for sharing!

  5. can i see the demo please ?

  6. Effect works fine however I am having some trouble getting the image into the left and top of the div that its in. There seems to be a 20px gap that I cant remove. Any ideas.? You can see the gap at the top of the image.

    1. Do you have a link I could look at?

  7. Hi! I tried using this in my external sheet but it didn’t work, so I tried inline since someone said that’s how it worked for them but it’s still not working. Any help would be greatly appreciated as I’m not sure what I’m doing wrong :)
    Thanks!

    1. Nevermind, got it working! Thanks for the tut!

  8. Hello,
    I tried the code above but it doesn’t work. I get an error on my page. And the error is the script src. I did everything what is mentioned. But the only thing I see is my picture off. And if I hover, nothing is happening…
    I am confused.

  9. How can i make it work on a wordpress blog?
    Thanks! Great tutorial!!!

  10. this is a totally excellent tutorial!
    Im not a jquery expert but i followed all the instructions and read through it and it worked great for me first time!

    I have a question though, Id like to use this for a large gallery, about 18 pictures. is there an easier way to do this then just re-creating the same css and javascript over and over for each thumbnail?

  11. I’m having the same problem as Cat Lady. I really want to use this but if I can’t find a fix for IE 7 and 8 then I don’t know if I should use it. Its a shame, what a great effect

    1. Have you got a link I can take a look at?

  12. This works great… everything else I’ve tried dies a terrible death in explorer. This even works in IE6!

    thanks for sharing!

  13. Really useful idea.. already saved on delicious and twitte this post :D

  14. guess i should’ve included the website: http://www.claylovesashley.com/indexTest.html – only the polaroids are active. thanks so much for your help!

  15. this is great! all the others wouldn’t work like i wanted them too…thanks!

    is there a fix for IE using when using .pngs? I keep getting an ugly black border around my image :)

  16. Excellent tutorial,thanks for sharing.

  17. @Scott – No worries thanks for the inspiration I got from your site!

  18. HI
    Thanks for featuring our site on your blog and glad you like what we have done with JQuery.
    Keep up the good work!

    Scott Graham
    Head of Digital Media
    The Big Picture

  19. HI
    Thanks for featuring our site on your blog and glad you like what we have done with JQuery.
    Keep up the good work!

  20. Can this be done with say text on a background that fades?
    i have been playing with it and havent gotten it just yet.

  21. Can’t get this working ehn i put the style code into a separate style sheet but it works when the style is inline. Any ideas?

    The page loads but the second image doesn’t come in when you hover over the image.

    cheers!

    1. Have you got a link? I will have a look for you :)

Comments are closed.