HOVER OVER TEXT to REVEAL IMAGE - Elementor FREE
Vložit
- čas přidán 24. 07. 2024
- in this video, I show you how to make a 'hover over text and show image' effect/interaction in Elementor. I LOVE Webflow interactions, they're on another level BUT I'm going to be experimenting and trying to replicate them in Elementor as much as I can with every Elementor video I make :)
CODE:
www.notion.so/CODE-Hover-over...
Timestamps:
00:00 Intro
00:09 What are we building today? :)
00:24 An idea of what's to come next...
00:48 Building the thing
05:46 Outro
Thank you for watching!
🟠 SUBSCRIBE TO THE NEWSLETTER:
newsletter.studioegli.com/
👀 Watch these next:
WEBFLOW LIKE HORIZONTAL SCROLL SECTION - SIMPLE TRICK Elementor PRO
• WEBFLOW LIKE HORIZONTA...
Elementor smooth infinite loop image carousel - FREE & PRO options
• Elementor smooth infin...
THESE TRICKS will make your heading look REALLY FANCY and PROFESSIONAL / Elementor FREE
• TWO FONTS in ONE HEADI...
You won't believe how easy it is / Elementor FREE CUSTOM CSS
• HOW TO add CUSTOM CSS ...
SCROLL TO TOP BUTTON in Elementor for FREE No CODE OR PLUGIN REQUIRED
• SCROLL TO TOP BUTTON i...
DON'T MAKE BORING 404 PAGE in Elementor / CSS code included
• Let's BUILD a 404 PAGE...
🟠 TRY ELEMENTOR
be.elementor.com/visit/?bta=2...
🟠 TRY HOSTINGER
hostinger.com?REFERRALCODE=1ANDREEA61
🟠 WORK WITH ME
www.studioegli.com/
🟠 YOU CAN FIND ME HERE TOO
TWITTER - @AndreeaEgli
LINKEDIN - / egliandrea
INSTAGRAM - / egliandrea.studios
🟠 FOR BUSINESS ENQUIRIES
contact@studioegli.com
Disclaimer - Some links in my videos' description box may be affiliate links, meaning I will make a commission on purchases you make through my link. This is at no extra cost to you to use my links/codes, it's just one more way to support me and my channel! :)
#elementortutorial #elementorpagebuilder #elementortipsandtricks
Let me know how you'll be using this interaction/effect in your next project 🤓 Hope this was useful!
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!
Thank you so much 😊 there’s a follow up to this video, which I think might be even better 😉
This channel is a gold mine! Thank you for creating these videos, really appreciate your work♥
thank you so much, Sakura! 💜
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!!!
Awesome! Thank you! Hey, it's never too late 😅
Thank you
Thank you so much for watching, will not stop, at least any time soon😁
This is absolutely fantastic! I have always wanted to do this in Elementor. I just found your channel today. Suscribed! You are awesome!
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!
Thank youu!!! i was looking for this 👍👍
Thank you for this, Andrea 😍
This is gonna be awesome for Menu Items and text base services ✅
You're welcome, Ahmed! 😀
Yup, some great ideas there, this can be used in so many ways
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. 😉
@@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
THANK YOU!!! 🤘😎
You bet!
You can make that number in the project title dynamic with a psuedo element and CSS counters.
Yes indeed! great point, Frank 😉
Thanks! That helped big time.
You're welcome, Dawood! I have a more updated version of this feature if you want to check it out🤓
Gawsh I love your content, saw some other videos, can't wait to go through all of them! Big ups Andrea!! 🔥🔥🔥
@@flameboyxo Thank you so much! Let me know if you have any requests
@@flameboyxo I'm on LinkedIn and I did start sharing my content on there too look me up: Andreea Egli - Hehl
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?
Gracias
De nada 😎
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?
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
Thanks andrea for this nice tutorial. I Have a question..Can we stick image with the cursor on hovering text
You're welcome! I'm not sure I understand the question, do you have an example I can look at?
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?
Hey, benni! Yes, I forgot to remove that property after testing it out. The transition doesn't work in this case
Can this be done on a button to reveal image on hover?
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?
Hey, you're welcome!
Are you using sections or containers? I have a more updated video here: czcams.com/video/lJO-uIePihM/video.html Maybe this will help!
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? 🤔
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.
@@andreaegli Thanks!
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?
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🤓
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...
You're welcome! There might be smth you missed? Anyway, here's an updated version for containers: czcams.com/video/lJO-uIePihM/video.html
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!
I wish it was that simple. I will make a video at some point 😉
Hi! Thank you for sharing. How is this working on the mobile view? Works on click or doesnt work at all?
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.
Thank you! @@andreaegli
Hi Andrea, How should we make so it doesn't show the images in ipad and iphone?
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 :)
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.
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 czcams.com/video/lJO-uIePihM/video.html
@@andreaegli Thank you dear
👌👏👏👏❤️😊
😍
unfortunately the custom css its not available in free version :/
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 🙂
not working for me
unfortunately elementor free removed the custom CSS option, so this doesn't work any longer. It didn't for me at least
Use the code snippets plugin or add your CSS through the WP Dashboard: Appearance > Customise > Additional CSS
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
@@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.
@@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👍🏻
Hey ! Great Vidéo but it's not working for me !
Thank you, Mamadou! Sorry to hear that, what is not working exactly? Are you using this with flex-container feature of elementor?
@@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.
@@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...
@@andreaegli thank you
@@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