Tagged: ,

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • September 1, 2014 at 3:58 pm #311884
    Nimrod32

    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.

    September 1, 2014 at 4:08 pm #311892
    Yigit

    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,
    Yigit

    August 5, 2015 at 11:38 pm #483618
    aph80

    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,

    Arkadi

    August 6, 2015 at 3:48 pm #483964
    Yigit

    Hi!

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

    Best regards,
    Yigit

    August 6, 2015 at 5:42 pm #484060
    aph80

    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.

    August 7, 2015 at 4:09 pm #484584
    Andy

    Hey!

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

    Cheers!
    Andy

    August 7, 2015 at 7:23 pm #484659
    aph80

    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.

    August 10, 2015 at 10:43 am #485142
    Ismael

    Hi!

    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:

    http://css3.bradshawenterprises.com/cfimg/
    http://designmodo.com/image-swap-effect/
    http://davidwalsh.name/css-flip

    Best regards,
    Ismael

    August 15, 2015 at 5:14 pm #488249
    aph80

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

    August 17, 2015 at 4:28 am #488514
    Ismael

    Hi!

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

    Cheers!
    Ismael

  • Author
    Posts
Viewing 10 posts - 1 through 10 (of 10 total)
  • The topic ‘Create Rollover Images’ is closed to new replies.