HOVER OVER TEXT to REVEAL IMAGE - Elementor FREE

[@andreaegli]

Let me know how you'll be using this interaction/effect in your next project 🤓 Hope this was useful!

[@mykeajohnson4657]

This is by far the cleanest pure elementor design tutorial I've seen in years! Clear, simple, and perfect. I don't comment often but you are definitely one to follow. Thank you!

[@andreaegli]

Thank you so much 😊 there’s a follow up to this video, which I think might be even better 😉

[@sakuraone8081]

This channel is a gold mine! Thank you for creating these videos, really appreciate your work♥

[@andreaegli]

thank you so much, Sakura! 💜

[@micaelanovastudio6807]

This is absolutely fantastic! I have always wanted to do this in Elementor. I just found your channel today. Suscribed! You are awesome!

[@victorzacarias4462]

great tutorial! thanks a lot

[@andreaegli]

Thanks so much! You’re very welcome ☺️

[@thetheedesk]

Thank you

[@andreaegli]

Thank you so much for watching, will not stop, at least any time soon😁

[@KarlaOviedo]

Thank youu!!! i was looking for this 👍👍

[@AllenLu]

I'm subscribing right now, I love these cool effct and tips! it's pity that I discover your content too late but here I am!! keep posting and share more tips with us!!!

[@andreaegli]

Awesome! Thank you! Hey, it's never too late 😅

[@Andresvideo]

This was so helpful! THANKS A LOT! Your videos are really helpful and very well-paced. Everything is explained in a great way! new sub!

[@franktielemans6624]

You can make that number in the project title dynamic with a psuedo element and CSS counters.

[@andreaegli]

Yes indeed! great point, Frank 😉

[@deduice]

Thank you for this, Andrea 😍 This is gonna be awesome for Menu Items and text base services ✅

[@andreaegli]

You're welcome, Ahmed! 😀 Yup, some great ideas there, this can be used in so many ways

[@deduice]

Keep bringing the Webflow feel, style and interactions to Elementor. I'm loving them! . Hopefully you can do a full tutorial of Webflow site on Elementor. 😉

[@andreaegli]

@@deduice will do and it makes me happy that you're really enjoying them!!!! I will for sure do that soon enough. i just want to make sure I have enough 'moving' part to do that

[@flameboyxo]

Thanks! That helped big time.

[@andreaegli]

You're welcome, Dawood! I have a more updated version of this feature if you want to check it out🤓

[@flameboyxo]

Gawsh I love your content, saw some other videos, can't wait to go through all of them! Big ups Andrea!! 🔥🔥🔥

[@andreaegli]

@@flameboyxo Thank you so much! Let me know if you have any requests

[@andreaegli]

@@flameboyxo I'm on LinkedIn and I did start sharing my content on there too look me up: Andreea Egli - Hehl

[@X4L0]

Hi Andrea! Awesome Content ^^ Is there a way I can do it the other way around? I mean, hover over image to change the headline and text displayed? 🤔

[@andreaegli]

Thank you! 😎 I haven't tried this but maybe if you switch the code around. So, the class you have on the heading, you can set to the img. Should work but might need some additional code.

[@X4L0]

@@andreaegli Thanks!

[@Juniorgamers99]

Thanks andrea for this nice tutorial. I Have a question..Can we stick image with the cursor on hovering text

[@andreaegli]

You're welcome! I'm not sure I understand the question, do you have an example I can look at?

[@yinoization]

Gracias

[@andreaegli]

De nada 😎

[@QuintinMills]

Hello, what a great video - exactly what i am looking for. BUT, when i add the css to the heading to make it show, nothing happens...

[@andreaegli]

You're welcome! There might be smth you missed? Anyway, here's an updated version for containers: kzbin.info/www/bejne/onuyXqh_mrWcnq8

[@deduice]

Can this be done on a button to reveal image on hover?

[@wearezigurat]

Hey Andrea, i love your videos, i'm trying to use this animation and for what i can see it only works if the text and the image are in the same container, is there a way to make it work if the image is on another container?

[@andreaegli]

Hey! thank you! yeah, it's built to work in the same container only. Could be that you need to write some JS for that to work the way you want it

[@marcopuruncajas7615]

Hi Andrea, How should we make so it doesn't show the images in ipad and iphone?

[@andreaegli]

Hey Marco! Add this: @media only screen and (max-width: 768px) { .img-one { display: none; } } Let me know if it worked and if it didn't, just paste the code exactly here the way you have it inputted or email me :)

[@zzzmariazzzz]

Hi! Thank you for sharing. How is this working on the mobile view? Works on click or doesnt work at all?

[@andreaegli]

Hey! You're welcome! It works but I suggest disabling it and just showing the images by default. Some effects are just not made for mobile.

[@zzzmariazzzz]

Thank you! @@andreaegli

[@jiteshpujari1]

This is amazing. Is there a plugin that does it. I want to display my post archive like this with featured image on hover. Is there a way to do that?

[@andreaegli]

thank you! hmm, maybe but have no idea. One thing you could try is to use the loop grid widget. This is a great idea for me to make a video about🤓

[@inna_0_0]

I loved the video, really cool effect. I don't have access to elementor pro, is there a way I can do this without it?

[@bennitr.2992]

Thank you! But I was wondering what the property transition does? When you hover on the text, the image should be displayed with a transition isn't it, because in the example it doesn't?

[@andreaegli]

Hey, benni! Yes, I forgot to remove that property after testing it out. The transition doesn't work in this case

[@EAgamerfreak9x9]

hey thanks for the help but this is just not working for me. im trying to create this feature in my mega menu where when hover over text or an icon list (acting like a sub-menu item) it will then reveal an image to the right depending on what i hover over. it wont work.

[@BSVWholeSale]

Can you please tell me how can I make the images reveal on an entire screen? Like full page pictures. Please help! I'm waiting! Thankyou so much!

[@andreaegli]

I wish it was that simple. I will make a video at some point 😉

[@draucreativestudio8119]

Hi thx for your amazing tutorial. i need your help, beacause i created this tutorial on a website, and its working on just the first text ... i created a list of text and image with different image, but in backend its all working, and in frontend work just the first of list any suggetsion?

[@andreaegli]

Hey, you're welcome! Are you using sections or containers? I have a more updated video here: kzbin.info/www/bejne/onuyXqh_mrWcnq8 Maybe this will help!

[@laohana]

unfortunately the custom css its not available in free version :/

[@andreaegli]

You can add custom css in the free version as well, in two ways actually. I have a video on the channel on how to do it in one way and the other is by installing a plugin called code snippets. Let me know if you need additional info 🙂

[@logeswaribalu]

Hi can u pls help me, Elementor builder doesnt have under motion effects ( scrolling effects ) Motion tracks those such things how I can do this effect.

[@andreaegli]

Hey! You don't need the scrolling effect for this effect to work (although it's weird that you don't see it under motion effects). Just follow along and it will work. I have a more updated video for containers kzbin.info/www/bejne/onuyXqh_mrWcnq8

[@logeswaribalu]

@@andreaegli Thank you dear

[@muhammadahmedraza8553]

not working for me

[@miguelsbastida]

unfortunately elementor free removed the custom CSS option, so this doesn't work any longer. It didn't for me at least

[@andreaegli]

Use the code snippets plugin or add your CSS through the WP Dashboard: Appearance > Customise > Additional CSS

[@miguelsbastida]

Just tried with snippets, but the CSS function is a pro feature, so it kind of defeats the purpose. I did try as well with an elementor custom css plugin addon, and I managed to put everything in there following your steps, but for some reason the image never shows on hover... the image hides, so I guess the css is kicking in, but the image never displays upon hover, weird@@andreaegli

[@arnabmaiti6269]

​@@miguelsbastida there was a sign ~ like that on the code. Remove this sign and it will work. One more thing you don't need to add css on custom css panel only you can just drag a html snippet on the container and add the css code with tag. And it will work. I am using free elementor and I have added a lot of interactive elements from her video. This is really a great channel.

[@chelseavanessa5745]

​@@arnabmaiti6269omg thanks for the tips, i was confused and searching why it didn't work for me even though i hv done it step by step, but when i remove the '~' on the css it automatically works👍🏻

[@mamadoukone6839]

Hey ! Great Vidéo but it's not working for me !

[@andreaegli]

Thank you, Mamadou! Sorry to hear that, what is not working exactly? Are you using this with flex-container feature of elementor?

[@RobertStewart2209]

@@andreaegli is there a difference when using the flex container my image is flickering when i hover over the word but if i hover to the right of the container the image comes up on the left side fine.

[@andreaegli]

@@RobertStewart2209 Hey! I haven't tried this with containers yet. I will test it out in the next couple of days and get back to you. I'm actually looking into making an update video soon...

[@RobertStewart2209]

@@andreaegli thank you

[@andreaegli]

@@RobertStewart2209 ok, i just tested it, it works even better than with sections. If you give me your email, I will send you the file so you can check it out

[@kamessytta]

👌👏👏👏❤️😊

[@andreaegli]

😍