Make A Rollover Image Effect – Image Changes On Hover

HTML LOGO

Attention: This tutorial takes you no more than 2 minutes to learn.

A rollover or mouse over image is a great image effect you will have seen used on lots of blogs and websites. When you use this effect with an image or picture you add to your blog, the image will change to a different image once you hover your cursor over it. It’s also a very easy to use and can have so many uses.

Here’s a preview of a rollover image. Place your cursor over the image to see it change:

The image is also a clickable link, so you can use it as a link on your blog.

More Examples : Kate the author of Cronicles Of A Country Girl has used this effect to display two versions of photos. In her words “Basically, what I wanted to show on my blog was the original photo, but if you move your mouse over it, you’d be able to see the SOOC version. (SOOC means Straight Out Of Camera).”

You can check out the results here – Kates Mouseover Images

Making Rollover Effect Image

This is the code we use to make the image:

<a href=”TARGET URL GOES HERE“><img src=”URL OF FIRST IMAGE GOES HERE” onmouseover=”this.src=’URL OF SECOND IMAGE GOES HERE‘” onmouseout=”this.src=’URL OF FIRST IMAGE GOES HERE‘” /></a>

You now need to customize the code by adding the images you want to use & the address you want it to lead to when clicked.

In the above code change the following:

1. TARGET URL GOES HERE
Place the address you want the image to lead to when it’s clicked.
Example: http://www.spiceyupourblog.com

2. URL OF FIRST IMAGE GOES HERE (x2)
Place the URL of the first image here. This is the image shown before you hover over it.
Example: http://i941.photobucket.com/albums/ad259/spiceupyourblog/info.jpg

3. URL OF SECOND IMAGE GOES HERE
Place the URL of the second image there. This is the image that appears after your cursor hovers over it.
Example: http://i941.photobucket.com/albums/ad259/spiceupyourblog/Blogger-2.png

Once the changes are made, you are done. You can place the image in your blog posts/sidebar or anywhere html can be used.

Tip: Another cool effect for your images you want to check out is The Opacity Blurred Hover Effect.

  1. Thanks for posting such amazing things.

    ReplyDelete

  2. So simple and easy to follow thank you! Worked perfectly first time!

    ReplyDelete

  3. Thanks Brumby,

    Its a great effect, if you seen it on a blog or website you would think ‘I would like to do that but i bet it would need a lot of code’.

    Its amazing how some of the best tricks are the easiest ones.

    Paul.

    ReplyDelete

  4. Thankyou for the tip – I have just made a logo so this will be so useful.

    ReplyDelete

  5. Hi Leaves, thanks for the comment if you need more help just ask.

    Paul.

    ReplyDelete

  6. Kathleen Pace, PhotographerDecember 15, 2010 at 5:09 PM

    Once I have completed the code with my 2 images URL ( I use tinypics ) Can I go into Blogger, Get Gaget, HTML/Java Script/ and add the code in there?
    I am excited to figure this out and have before and after images on my site just like Florabella! Yeah! Thank you for posting!
    My site:www.amelyajaynephotography.com I will be doing all rollover images on my “Darkroom” page. It is listed under “For Photographers”.

    Thanks!

    ReplyDelete

  7. I don’t understand the target URL. Where would I be pointing to. What address goes in there?

    I am trying to create a roll over on my blog.

    Thank you.

    ReplyDelete

  8. @ JJ – The target URL is the address people will go to if they click the image.You can put any address there or you just could leave it blank.

    ReplyDelete

  9. @ Kathleen – Yep well done you can add the images to a Html/Javascript gadget.Remember the space in your sidebars will be limited so make sure the images are not too big.

    ReplyDelete

  10. great tutorial! I like that this doesn’t require any alteration to the < head >. 🙂

    ReplyDelete

  11. Thank you Paul for your advice.

    ReplyDelete

  12. Hello again Paul.

    I wonder if you could help me with this on roll-overs. I followed your code and have succeeded with a good roll-over on my blog. But now I’m finding I can’t create one that is clear. The images are appearing blurred…I can’t understand it. When I first click on the image in blog editor the image looks fine but then goes blurred.

    Can you please help?

    Thank you.

    ReplyDelete

  13. @ JJ – It could be the images or the sizes of images your using.The code for the rollover image wont effect the image display.

    ReplyDelete

  14. Hi Paul

    I have resolved it today. What I was doing wrong was this.

    When I uploaded my images from my pictures done in Serif Drawplus into the ‘add images’ box on my blog, I was right clicking on the thumbnail then clicking on properties for the URL.

    What I should have done and did do, was add the selected images into compose in the blog editor and then right click on the added images for the URL. This then gave me much larger images which do not distort. Then using your example and substituting I came out with perfectly sharp images. It doesn’t appear to matter about the size of image created in Drawplus, all sizes work fine.

    Many thanks.

    ReplyDelete

  15. Thank you SO MUCH!!! I have been looking all over for a simple way to do this and this tutorial is PERFECT and worked right away!!!! Great job.

    ReplyDelete

  16. very cool thanks!

    ReplyDelete

  17. I would truly love to learn this. It seems so simple, but since I’m not very savvy, can you tell me what the initial step is? I have uploaded the images in Photobucket so I can get a URL of each. Do I start the post in Blogger by uploading the image or just typing the HTML code. I attempted to copy your HTML but when I add to by post it is grayed out. Thanks for your help.

    ReplyDelete

  18. @ Marilyn – I you have the images on Photobucket you need to copy the direct URL from Photobucket into the positions shown in the code.

    ReplyDelete

  19. Hey Paul,

    Thanks for share something like this.

    Since i’m a new comer to this blog thing, i need so many read the trial and error for myself. Your explanation just gave me a huge help!

    again, Thank You!

    ReplyDelete

  20. Thanks for the rollover tip. I can’t wait to give it a try.

    http://www.kjlovesphotography.blogspot.com

    Bright blessings,
    Kathy

    ReplyDelete

  21. thanks and tried – works great
    could the second picture be an animated gif?

    ReplyDelete

  22. Kimberly Anne KnoxDecember 9, 2011 at 8:26 PM

    This is perfect, thank you!!

    ReplyDelete

  23. Hi Paul

    For sometime I’ve been able to create rollovers with your help in Blogger, but now I’ve been unable to do so because of cross-site scripting notification. I can put the images into your code but no rollover.

    I have disabled XXS(filter), and allowed mixed content…but to no avail.

    I’m using XP Home with IE8, I’m not using any other browser.

    Are you able to help? Thank you.

    ReplyDelete

  24. Great! Worked. So simple!

    ReplyDelete

  25. Thank you so much for this tutorial! I run a photography website, and this will help a BUNCH with before & after photos for retouching and the like.

    You did a great job describing it, and made it extremely simple to understand. Thanks again!

    ReplyDelete

  26. Jeanie (Inspired Wish)March 19, 2012 at 10:55 AM

    Hi, this sort of worked for me. Once I rolled my mouse over the image, the 2nd image didn’t appear. Instead I got a ‘photobucket image removed’ message. To answer the obvious question, no my image wasn’t deleted, I triple checked. So close!….this is the closest I’ve gotten to making the mouse roll over work for me. Any ideas?

    ReplyDelete

  27. Jeasnie the code is doing what it’s supposed to the problem is with the image.I never ever recommend using Photobucket for image hosting I even have a post about it in the archive, you can host all your images on Blogger for free.I imagine the problem with your photobucket image is bandwidth exceeded.

    Delete

  28. Does this work on Tumblr? Where would I input this code?

    ReplyDelete

  29. I can’t get it to work in Tumblr…It just shows the first image and the click through link…:( any way to make it work?

    Delete

  30. THANK YOU! Saved my coding-incompetent butt haha

    ReplyDelete

  31. Perfect.

    ReplyDelete

  32. Helllo nice job

    ReplyDelete

  33. Nice dude..!!!!..u have save my site……!!!….www.jomsedut.org

    ReplyDelete

  34. Thank a lot worked great!!!

    ReplyDelete

  35. Thanks for this simple tip

    ReplyDelete

  36. Hi There,
    I’ve been trying this for the last hour and I can’t get it to work. I copied the code into HTML and replaced the 2 images, i tried URLs from facebook, redbubble and my own blog posts. I remembered to post the first url twice.
    My first image is there but nothing happens when I roll over, except that the outside faint border changes colour from blue to red. I’m trying to do this in a wordpress post. check out the post here (and my fail) http://beavercity.wordpress.com/2012/07/10/balloon-days/
    any suggestions as to what i’m doing wrong?

    ReplyDelete

  37. How can i slow down the hovering? Like make the post flow together

    ReplyDelete

  38. Irina – With this code there is no way to slow down the transition between images.

    Delete

  39. The first image appears, but not the second 🙁 it has an X in the top left corner, even thought i added both images to the library of my CMS.

    ReplyDelete

  40. Thanks for the code! I’m having a problem with it though-
    When I put my mouse over, it changes to the second image. However, when I remove my mouse the second image stays. I can’t figure out how to get it to change back…
    Here’s where I’m trying to use it- http://itsonlywasteland.blogspot.com/p/diy.html

    ReplyDelete

  41. I’m having this same problem. Were you able to resolve it?
    Thanks!

    Delete

  42. SAME problem.. any solutions?

    Delete

  43. Make sure you don’t delete a needed ‘ in the code before or after any of the url’s

    Delete

  44. Asecon Asesoria FiscalJuly 25, 2012 at 7:42 AM

    Impressive!!! The easiest solution I have found for implementing this effect. Thank you so much!!

    ReplyDelete

  45. This was super helpful! Thanks so much!!

    ReplyDelete

  46. I am not sure if you are still helping people but I am at a loss as to why this is not working on my Blogger site! I have tried everything. At first it appears but when I go to hover over the image it disappears! If I have two in a row only the one that I hover over disappears and then when I hover over the second one it disappears. It is driving me insane. :/

    ReplyDelete

  47. Thanks for great tutorial. I’ve searching this for very long time. I really want to replace my ordinary text link into something else. Can’t wait to try it.

    ReplyDelete

  48. sir it is not working for my blog.when i used code it shows nothing on images and a bos of broken image appears .pls help me sir.

    ReplyDelete

  49. Hi! Is there any chance you could put 2 different rollover spots in 1 image? Please let me know!

    ReplyDelete

  50. Thank you so much for this, I’ve been using it a lot on my site!

    ReplyDelete

  51. hi.
    Why is the image after look like an x?
    The first image is ok, but second turned into an x.
    please help.
    many people asked as well.

    ReplyDelete

  52. you’re the best…thanx a lot…

    ReplyDelete

  53. This is very useful for my blog,http://guessthemoviequote.blogspot.com/. Thank you so much Paul.

    I do have one question, though. Say I have a link and I want the image to appear on a fixed area of the blog, then I want the fixed image area to change every time I mouseover to a different link. Would that be possible?

    ReplyDelete

  54. You rock! I’m no computer expert, so a lot of tutorials on this were hard to follow–yours is explained beautifully and was working in less than a minute. Thanks!

    ReplyDelete

  55. Ver useful post really i like it

    ReplyDelete

  56. helpful bro..

    ReplyDelete

  57. I have been strugling to achive this using CSS and JavaScript!

    Thanks for the easy and straight forward HTML code!

    ReplyDelete

  58. Love it!

    ReplyDelete

  59. ohhhhh yeah. worked in 1 sec. no prob! :)xxx

    ReplyDelete

  60. Can I just add that if you put height and width dimensions into it all the images will be the same size: e.g.

    img src=”media/map1.jpg” height=”580” width=”823” onmouseover=”this.src=’media/map2.jpg’” onmouseout=”this.src=’media/map1.jpg’”

    Thank you

    ReplyDelete

  61. Thank you very Much !!!

    ReplyDelete

  62. There is a delay when I rollover and the image loads for the first time. This doesn’t happen here but does on my webpage. Is there any way of fixing this delay as it doesn’t look smooth?

    ReplyDelete

  63. Such a nice info, thank you very much for sharing this post.

    ReplyDelete

  64. thanks buddy for this valuable info….. 🙂

    have a good day… 🙂

    ReplyDelete

  65. Francis, thanks for this nice and simple code. I used to put a large javascript code for image hovering. Thanks again.

    ReplyDelete

  66. Thank you very much.
    🙂

    ReplyDelete

  67. You have no clue how much you helped. I first tried making a swf file to use for a hovering effect but it covered up the link. I’m in web design 1 and I like to further out from everyone so instead of making text links, I made pictures to use for the navigation links.

    Thanks, I will definitely be looking at more tutorials on this website.

    ReplyDelete

  68. thanks! really helpful.

    ReplyDelete

  69. thank you it working properly

    ReplyDelete

  70. Thanks. Fantastic post

    ReplyDelete

  71. Many thans from me too, great and easy trick to set!
    Cheers!

    ReplyDelete

  72. Thank you very much for sharing this.

    ReplyDelete

  73. sweet! thank you

    ReplyDelete

  74. great example. Thanks.

    ReplyDelete

  75. Thank you, works just perfect 🙂

    ReplyDelete

  76. amazing tutorial ,
    thanks alot

    ReplyDelete

  77. Thanks for solving my problem thru this helpful forum. I appreciate.

    ReplyDelete

  78. Hi, I’ve added the code and followed the instructions. Though the first image appears, the second does not when I hover over it. Any help from anyone that may know the solution to this. Thanks!

    ReplyDelete

  79. It was really needed. I want this trick of image changing on my blog.

    ReplyDelete

  80. Jeanie (Inspired Wish)January 10, 2013 at 5:46 AM

    After struggling with sprite css roll over images for the last two days, I am so thankful to have found this. It worked!! THANK YOU THANK YOU THANK YOU

    ReplyDelete

  81. Get Your Love Back

    ReplyDelete

  82. Thanks for this one! May I ask another question? How can I do something like on your navigation bar, the one entitled “categories.” Showing onmouseover on a certain text/image?

    ReplyDelete

  83. Does this function work the same when using an image map?

    ReplyDelete

  84. I’m in tears. You saved my final project in web authoring class! Thank you thank you thank you!

    ReplyDelete

  85. Wow, I’m glad we could help with your class !

    Delete

  86. Thanks for code…I used this code and it works successfully but i have one problem…. i want to give two images in one link and both images will change on hover at the same time when i move cursor on link…..????? waiting 4 your help with code…….

    ReplyDelete

  87. Its working thanks.. Actually I want, initially no should should be there.. only text and when you hover mouse on text then only image should be shown. Can you please help??

    ReplyDelete

  88. Thanks a lot gentleman… you are a true legend… keep posting innovative ideas and soon i’ll be posting my programing codes on ur blogging site…Thanks 🙂

    ReplyDelete

  89. very nice .thanks for this

    ReplyDelete

  90. cool I like that I dont have to log in to comment! mouse over code was the best of many sites!

    ReplyDelete

  91. Kasamadupe OlameelaykornMay 1, 2013 at 12:19 PM

    thanks to you, it really help me.

    ReplyDelete

  92. Thanks it saved my efforts to put in more code 🙂
    Great Tip

    ReplyDelete

  93. Best SEO in MumbaiMay 16, 2013 at 3:28 PM

    Superb! This is the best code I got on the web. Others were too complicated to understand. This is plain, simple and effective. Thanks!

    ReplyDelete

  94. All Website ToolsMay 20, 2013 at 9:41 AM

    Thanks for the great and simple tutorial!!

    ReplyDelete

  95. awesome! but i have a problem though, the rollover image stays there even when i’d removed my cursor. some are stuck while other icons work perfectly well. please enlighten me!

    many thanks 🙂

    ReplyDelete

  96. I have the same issue as the previous commenter.

    ReplyDelete

  97. you are the greatest thank you very much

    ReplyDelete

  98. shit!!!…u a life saver..cnt belive u js mad this look so easy..and t wrks perfct!!

    ReplyDelete

  99. Perfect! Thank you so much!

    ReplyDelete

  100. just great! but tell me how i can copy first image. 🙂

    ReplyDelete

  101. I have spent about 12 hours trying to do thins and for some reason when I put the mouse over it works fine but when the mouse is off its still the rollover colour. But this code works perfectly THANK YOUUUUUUU!!!!

    ReplyDelete

  102. This is the most straight-forward code I’ve found for roll-over image links. THANKYOU!

    ReplyDelete

  103. THANK YOU SO MUCH! I was about to use a complicated css until i found this 😀

    ReplyDelete

  104. Thank you for sharing your wealth of knowledge, this is the simplest rollover effect I’ve ever seen!

    ReplyDelete

  105. I have a text next to the image. How can you make it that when visited it stays on a different colour, in order to spot the page I’m on?

    ReplyDelete

  106. Not work with WP Blog, Please Help…

    ReplyDelete

  107. OH THANK YOU!!!!! All I could find was css stuff that changed my entire blog information. I knew it had to be simpler than all of that! Thank you for supplying an easy and simple way!!!

    ReplyDelete

  108. Nice tip, anyone feels it is slow a little bit.

    ReplyDelete

  109. Very nice, simple and straight to the point. Cheers
    Vietnamrum

    ReplyDelete

  110. Hi,
    I can get the fist image and the link working fine but nothing happens on rollover. i’ve tried using externally hosted (imgur) images and also trying to link to images saved within files/theme/[…] but no matter what, I still can’t get the second image to appear.

    Where am I going wrong?

    ReplyDelete

  111. upload your images in weebly and copy the target from there (right click on image)..
    check that the code is the right one without mistakes:

    tell me if it helped…….

    Delete

  112. This comment has been removed by a blog administrator.

    ReplyDelete

  113. I think I love you!

    ReplyDelete

  114. Thankyou so much! I have been trying to figure this out for ages and this is the only tutorial that has worked. I appreciate this so much! 🙂

    ReplyDelete

  115. You just made my wasteful agonizing three days feel so much better. This should be the number 1 webpage that pops up for mouseover effect. Originally posted in ’09 and still going strong. Thank you so much

    ReplyDelete

  116. Thanks this is the best, I like the KISS part fits me well. A question is it possible to have two or more pics roll over. I mean pic A rolls into pic B which then after 5 seconds rolls into pic C. The “notify me” box is gone

    ReplyDelete

  117. Some simple image hover effects samples…Image Hover

    Ling

    ReplyDelete

  118. Hi,

    I am using this in an email, and it looks great in the preview – obeys the code and does the rollover… but when I send it to email addresses it doesn’t roll. Thoughts anyone?

    ReplyDelete

  119. Thank you, I’ve seen several people suggest how to achieve this, but yours has explained nice and easy. Adding the code as you have makes it really helpful. THANK YOU :o)

    ReplyDelete