How to Create a Rollover Image Effect with HTML — Divi Nation Short

Posted on July 29, 2016 by in Divi Resources | 77 comments

How to Create a Rollover Image Effect with HTML — Divi Nation Short

Welcome to Day 60 of our Divi 100 Marathon. Keep tuning in for 100 days in a row of awesome Divi resources as we count down to the amazing release of Divi 3.0 on the final day of the series!


For a long time I have always wanted to create a rollover image. The reason why I didn’t bother to learn how to do it is because I thought it would take me time to do and I had to learn even more coding. I was really surprised when I found out how easy it was so I decided to share this with the community. I hope this quick and easy trick can help you create your own rollover images.

How to Create a Rollover Image Effect with HTML — Divi Nation Short

In this episode if Divi Nation I show you step by step how to make a Rollover Image with HTML. You do not need any special code or plugins for this. The code you need to follow along with the tutorial is:

< img src="IMAGE1" onmouseover="this.src='IMAGE2'" onmouseout="this.src='IMAGE1'" />

Subscribe To Our Youtube Channel

All Subscription Options:

Summary: How to Create a Rollover Image Effect with HTML

1

Start by preparing your images making sure they are the same size. I used Photoshop in my example but you can use any photo manipulation software. Save the two images as .jpegs.

2

Next upload the images to the media library. Remember that you have to be logged into your Wordress admin.

3

You are going to need the url at this stage so click on one of the images, on the right you will see the url. Copy this url for your first image.

4

Go to the page where you need place the rollover image and inset the text module. Click on the settings of the module and enter this code:

< img src="IMAGE1" onmouseover="this.src='IMAGE2'" onmouseout="this.src='IMAGE1'" />

Replace “IMAGE1” and “IMAGE2” with the url of the images from your media library. Save and preview the page.

5

Finally mouse over the image and you should see the rollover.

6

Next Week on the Divi Nation Podcast

Next week we will continue to interview members of the Elegant Themes design and development teams to talk about their WordPress stories, how they came to join us, and what kind of work they’re doing on Divi 3.0.

Be sure to subscribe to our email newsletter and YouTube channel so that you never miss a big announcement, useful tip, or Divi freebie!

divi-2-6-logo

Divi 100 Day 60

The Countdown To Divi 3.0

This post is part of our Divi 100 marathon. Follow along as we post free Divi resources for 100 days in a row! This 100-day countdown will end with the game-changing release of Divi 3.0, including our brand new visual editor built from the ground up using React. Divi 3.0 will change the way you build websites with the Divi Builder forever!
Let the countdown begin.

Learn More About Divi 3.0


77 Comments

  1. Nice, thank you!

    The code snippet is wrong though, the forward slash at then end is missing.

    Also, it’s better to do it with the code module. The visual editor from the text module does not understand the code, so it’s gone as soon as you switch back from the text to the visual editor.

    • Thanks for pointing that out John-Pierre, I was wondering about that (I’m not a programmer).

      I’m wondering if we can also make this same rollover as clickable button to send someone to another link?

      • Yes Jaime you can do that by puting the entire code inside an lable.

      • It seems we can’t add code here, sorry. I meant an “a” lable.

    • Thank you so much, John-Pierre.. I thought I was losing my mind LOL

    • Would you mind showing us where the forward slash should go so we do not stuff it up? Maybe post the correct code so that we can copy.

      Thanks

      • @Martin I was wondering the same thing. Something as simple as putting the forward slash in the wrong place could mess up the entire site.

        Would love to have an updated code to use.

    • could you post the correct code?

  2. Thanks for these rollover tips! I love how they produce a warm feeling when using them and encourage people to engage on websites.

  3. Could be a nice addition to image module.

    An check box with “Allow rollover” and a button to pick and upload the second image.

    • I like this idea!

    • +1

  4. So helpful thanks!

  5. LOL, this is so old school, I was creating this effect back in 1995!

    • Came here to say the same… this is definitely kicking it old school.

      • It’s old school JavaScript. To make it more modern, I’d throw in hover transition effect.

  6. Thanks – Question though…
    How does this behave on mobile devices? (no “mouse”)

  7. Thanks, Mak. I haven’t done a rollover image in so long that I forgot it was an option! Good reminder, and fun trick to incorporate into Divi.

  8. is this rollover image responsive otherwise?

    • Augustine Mak

      Yes it is responsive.

      • Hi Mak,

        Awesome effect; I’ve tried this, the hover works on all devices if there is no link, however, when i add a link to the image, it doesnot works on mobile and ipad anymore; any suggestion? thank you!

  9. The rollover effect is not working in this blog post (or with Firefox). I did a mouse over over the image, but nothing happens. Any other examples?

    • It might be what John-Pierre mentioned above, Natascha.

      That’s why it didn’t work for me as well =)

    • Same issue with Chrome browser.

  10. It appears something in the code is not working properly, at least when I tried it.

    • read first comment.

  11. Hi Augustine,

    I really like the rollover for http://doers.sg/work/ portfolio pictures.

    Is there any way you could do a tutorial on this…

    Thanks
    Shaun

    • That rollover effecrt is done using CSS transitions and should be developed as part of them CSS, no tas JavaScript rollover. Besides, rollover effects were cool 15 years ago.

  12. That’s a helpful little tip.

    I’m wondering if you can specify a certain module to appear rather than just an image on hover/mouse over.

  13. The code does not seem to work on my site, can you verify that the code is correct?

  14. Sorry but this is old school stuff – taught myself to do this over 20 years ago when html coding was all there was, been done a million times before and has nothing to do with Divi – I was quite looking forward to the 100 days of Divi – it started off quite well but the last few posts have been less than inspiring I have to say. That’s fine so long as the time is being spent on Divi 3 because I would imagine the 100 days is more of a distraction for the developers.

  15. What role does a mouseover effect play on a mobile device, where there is no mouse?

    • A tap typically simulates a mouse over (I.e. the same event is generally fired). The only issue with this is that if you also have an action immediately associated with the tap then this also fires which means that you don’t really see the hover effect

  16. I don’t think this tip is ready for prime time. For instance, in Chrome, the image comes up as broken initially. It plays nice after the first rollover.

  17. You should preload the hover image so there is not a delay on the initial hover event. Plus use the code module instead of text module.

    An easy CSS only way would be to drop a code module into the appropriate page and drop your code into the content area.

    Then in the custom css panel’s before section, drop this in:

    content: url(“http://www.path-to-hoverimage/hoverimage.jpg”);
    width:0;
    height:0;
    visibility:hidden;
    position:absolute; /* may not be necessary */

  18. you inserted a rollover image that gave a command (call to action) to order now, but you did not show how to make the link go anywhere. that would have been helpful.

  19. when i read all the comments, i think you have to make a new video.
    There is a big error. there is no link from the image, to the page og product…..

  20. You can do this pretty easily with CSS. All you have to do is give the image an ID in the module’s CSS tab, then use “content:” in the CSS to replace with another image on hover, like this:

    #id_here img:hover { content: url(‘/wp-content/uploads/2014/06/hover-image-here.png’); }

  21. Divi peeps, what can we learn from this? When you look at the winner of the Divi Showcase, they incorporated some old school tricks like creating animated gifs and a splash page as an intro, and now showing many newbie’s to this industry that yes, all of these old school HTML is still valid to make some really cool results within Divi. So play some good ol’ Grandmaster Flash on cassette tape, put on that fanny pack, and customize a little HTML to incorporate into your site.
    Thank you Mak and The ET crew for these awesome 100 days, looking forward to more.

  22. Awesome tutorial. I use the Visual Slide Box builder to manage most of my rollovers. Never been a fan of hard coding image links into my sites. Most clients struggle with updating these.

  23. Mak,

    awesome work and really nice to see a quick easy tip as a work around. I’ll certainly be experimenting with this.

    As mentioned above, for completeness it would have been good to see the used to set the redirection link on click, but I understand that might have muddied the code example more and you wanted to keep it simple.

    I am particularly interested in how hover over effects work on a mobile device, because I want this to work on mobile AND I want the image to be clickable, but how do I get both on mobile? (LOL). Not your problem.

    Wondering why you used such a large image 1000x1000px for a 1/3rd screen section. Wouldn’t a smaller image be more appropriate for this section size? Just curious.

    Thanks again,

    John

  24. Mak,apparently there is a missing slash in your code. If this is correct, would you mind advising the correct code? I for one am pretty keen to use this effect.

    • Augustine Mak

      I will update the code ASAP.

      • seriously. how bout now?

      • Mak, would you like to post the code now including the link code?

      • I am still looking for the correct code leading to a link – is it somewhere in these comments? This feels like a teaser with no follow through

  25. Will you show us how to have a static image that we can roll over a band of text.

    Many thanks

  26. Thanks for the code. It will help me making changes.

  27. Super code!
    Can I add a link to another page by clicking on the imagine?
    How can I do it?

  28. I asked in one of the Divi Facebook groups how to “swap an image on hover” and nobody was able to help me. This tutorial is EXACTLY what I’ve been needing. Thanks so much!

  29. Please team Elegant Themes, fix the code and posting. The described code does not work. See other reviews that many people are not getting.

    • It seems they put some extra spaces and code didn’t worked, you have to remove the spaces after the opening

      • yup worked for me

  30. mouse over the cart image on the site ‘Petit Bateau’. 🙂

  31. ET if you would kindly put up the code which swaps the image and also include the code which takes you to an URL. In other words takes you to a location when you click on it.

    • I would like this too – how to link the rollover to content

  32. This is nice, there is one little error, you need to remove the space between the “<" and "img".

    Now, how do we make the moused over image clickable?

  33. Just add this before the code to make the rollover clickable.

    • What code?

      • Looks like it was stripped out for some reason. I’ll add spaces and see if that get’s through the filters.

  34. can anyone please post the code to be able to add a link to another page on the same site?

  35. Mak, I would really appreciate it if you would address the issues in these comments as I want to use the feature in a couple of new sites.

  36. I could not get the code to work and then I realized there is an extra space after the initial bracket. It should be “<img" not "< img". I just wanted to point this out because it took me a half-hour to figure out what was wrong.

  37. Thanks John. However we are not having much luck with getting Mak to post the full code including the link to a URL.

    Would anyone like to post the full code so that we can all benefit?

    • please – Martin and the others make a great point. What use is this if it doesn’t link anywhere

  38. I am beginning to assume that all other Elegant themes are null and void. Is this the case. Have I paid for DIVI or all elegant themes?
    Thank you

    • I agree with Lois. I have some sites which use ET themes which are not responsive. I would like to see a responsive version of the themes released.

  39. also, this says “order now”, yet you show no area to put a link to the product. As for it being “old school”, so is Garamond and it is still a kick-ass font! As is Bach kick-ass music. Stop being snobs. Bevels are “old school” because they are ugly. Rollovers are classic and never get old. (I too have been writing code for 20+ years but feel no need to brag and belittle)

  40. Anyone who can . . . What’s the code for making rollover image clickable to an URL? It looks like this has been requested for weeks and nobody has provided it. Without it, the rollover doesn’t serve much purpose (even in the video example).

    This should take all but 30 seconds for you experts out there. Thanks.

  41. Thank you for that tip. Have you tried to use a rollover effect on which you go over text and the background picture changes? Like this one from this website. I would love to emulate this effect. I just can’t figure it out how. You need to go to the menu bottom on the top right. The effect I am referring to is there. Just pass your mouse over the big words on the left and you’ll see different backgrounds.

  42. Hi,
    Thanks for this information.
    I’m testing it with Divi 3.0 but it doesn’t run.
    How can I adapt it for divi 3.0 ?

    Thanks
    Regards
    Ludovic

  43. I can’t get the code to work . Please help. Code shows as text. Saw comments about / and spaces. Still not working. Want to use this soooo bad. I love divi. Please help.

    • Simply use the CODE module, not TEXT

500,591 Customers Are Already Building Amazing Websites With Divi. Join The Most Empowered WordPress Community On The Web

We offer a 30 Day Money Back Guarantee, so joining is Risk-Free!

Sign Up Today

Pin It on Pinterest