image reveal when hovering a text

  • Resolved lalofee

    (@lalofee)


    3 years, 1 month ago

    hello!

    this is more of a suggestion, maybe you think this would be an interesting issue to implement.
    or maybe there is a way with the actual steroids plugin, but i dont think so.

    what i try to implement is something like this: when you hover over a text, an image appears next to the text. nothing new, many websites have this. i found out, you can do this with pure css (for example with adjacent sibling selectors). works perfect when i try in codepen, but i cant figure out how it could work in wordpress (elementor theme + free elemtor page builder).

    (i made 2 colums, one with the text, second with the image. tryed to implement this solutiomn, i found at stackoverflow: https://stackoverflow.com/questions/28346414/hover-over-text-image-fades-in – but couldnt get it done)

    here is (a quite fancy) example, of what i mean: https://tympanus.net/Tutorials/RapidImageHoverMenu/

    i think this would be a very nice effect for the steroids collection ??

    or maybe someone has an idea how to solve it?

Viewing 1 replies (of 1 total)
  • Plugin Contributor Oooh Boi

    (@ooohboi)

    You can simply use the GSAP. Enable it under the Steroids for Elementor > Manage JS Libraries.
    Link options (Elementor editor) allow you to add the data attribute to it, and the link attribute value can be the image URL. This is actually how you can “transport” the required data to your JavaScript code.
    On top of that, be sure to add the custom class name to every link that should rely on the show-image-on-hover feature. This is how you separate normal links from the super ones, and at the same time instantiate the object that your JS code should relate to.
    Does that help? You may contact me at oooh(dot)boi29(at)gmail(dot)com if you need to.

Viewing 1 replies (of 1 total)
  • The topic ‘image reveal when hovering a text’ is closed to new replies.