Tagged: ,

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
  • #311884

    I am trying to complete a photography website and wish to feature before and after images. Is there a good way to create a rollover or hover in the Enfold theme? I want to show the original picture and then hover to show the new and improved picture.


    Hey Nimrod32!

    You can add HTML as following

    <img onmouseover="this.src='path-to-mouse-over-image';" onmouseout="this.src='path-to-normal-image';" src="path-to-normal-image" alt="what-ever-you-like"  />

    It would be a lot easier if you use one of “before/after” plugins

    Best regards,


    Hey Yigit!

    I tried to use the code but after saving it always converts to a regular image, not only in the appearance but also code-wise. Do you know what I can do?

    Best regards,




    Please use code block element or text tab on text block element.

    Best regards,


    In the text blog the code always changes to a regular image after saving. In the code block it stays.

    When I tried it before the effect wasn´t there. Now I have the image rollover effect but when I want to make the image clickable the “icon hover effect” seems to interfere with the changing image. So it doesn´t work with clickable images right now. And the code is still changing in text blocks.



    please search for a “before/after” plugin as Yigit already mentioned.



    Can you recommend any specific plugin? I´ve tried several and nothing is working with clickable images. Even removed the regular icon hover effect via quick css. Still not working.



    I’m not sure if there is a plugin for this but there’s a lot of css image swap tutorials that you can follow. Example:


    Best regards,


    Thank you Ismael! This seems to be the best solution.



    Great! Let us know if you need anything else. :)


Viewing 10 posts - 1 through 10 (of 10 total)

The topic ‘Create Rollover Images’ is closed to new replies.