HOVER ON CONTAINER TO REVEAL IMAGE - Elementor Wordpress Tutorial Flex Container
HTML-код
- Опубликовано: 7 авг 2024
- What do you think about this? Did it work for you? How will you use it?
CODE: www.notion.so/CODE-Image-reve...
Clamp @websquadron explainer video: • How to add Fluid Respo...
Clamp browser support: developer.mozilla.org/en-US/d...
Timestamps:
00:00 Intro
00:24 Demo walkthrough of what we're building
02:05 Building the feature
05:26 Brief intro to clamp CSS function
12:50 Ideas for the mobile design of this feature
14:25 Making the containers clickable
15:27 Code walkthrough with examples of what you can change
17:05 Outro
Thank you for watching!
🟠 SUBSCRIBE TO THE NEWSLETTER:
newsletter.studioegli.com/
🟠 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
The code was giving me problem to display the image on hover. After some modification and changes I figured out that there is a sign > like that on the code where the image hover assigned. After removing the sign the code works fine. Thanks for your valuable content. Your videos really help me to create an awesome portfolio for me without switching to Webflow. ❣️
So happy to hear that it worked finally! Yeah , that sign sometimes (for whatever reason) does give errors in code in Elementor. Anyways, stay away from Webflow :)))) anything but that!
Hey! I love all your videos, we need more people like you. Thanks for all!
Hey Joel! Thank you so much and yes, I agree with you 😁 welcome!!! Let me know if you have any video requests 😉
I always wanted to do this! You are BOMB. Looks so pretty on my website. Thanks.
I absolutely love all your videos. The style and the design are perfect! You answered a lot of my elementor quastions and I can´t wait to see more of your videos! The Clamp explanations absolutely blew my mind! Thank you so much and keep it up! Best from berlin! LG Sven
Aww, thank you so much, Sven! I’m so happy to hear that a lot of the things I show/talk about are helpful 😃 anytime you need help or have any video suggestions, shoot me an email 😉 also, I live in Berlin too (Koepenick)
Thank u for all your tutorials. U do a amazing job✌️
Thank you so much, Art! Let me know if there is something you would like to see on the channel🤓
Amazing as always!
Thank you so much, Victor!
Wow! Good content!❤❤💞💞
Hi! Your channel is awesome! thank you for your time and your work! 🙏👏
Hey! Thank you so much for your kind words! 😊
Superb 😍 Thank you for sharing
Thank you, Chathura!🤓
Fantastic. On Point. In love....!
Much appreciated!😁
Loved it!!!
Thank you, Dawood!🤓
Precious. !
💜
Andrea, how are you!? From what I understand, the effect only works on the desktop, is that it?! In other words, no tablet and no cell phone will not work?
I understand that this is true, because only on the desktop does the mouse 'pass' over the container. This does not happen on other devices, as there is no mouse. correct ?! Thanks !
Hey! I’m good, you? It works on tablet and mobile if you click but that’s not really good UX so I would just have the images be visible by default on mobile
NICE SECTION
Thanks
I Really Love Your Videos And Tips Since All Of Them Worked On My Design, I Still Have a Question Tho ! How We Can Make The Code Target The HEading Text Not The Container ? Meaning That Instead Of Showing The Image When The Cursoe is On The Container Instead, It Shows When The Curder is On The Header
Hello, Great video, I had implemented this and on the builder side works but not on preview and online, may you please help me on that?
Hey! Thank you! I can't help without seeing your implementation, it could be anything
Hello ! This is working in the edit mod but when I go to the preview nothing work , any idea :) ?
Thx
Hey! I can’t tell why without seeing your implementation of the code.
Hi tnx for this, but on mobile the images are already shown. On desktop the hover works, is there a work around?
They show on mobile on purpose for a better UX.
Hi! Loved this. But i have the elementor pro version that doesn't have the custom css anymore... how can i add this code to the theme css?
Thank you! go to Dashboard > Appearance > Customize > Custom CSS and add your code in there
Hello, very nice video, deserve way more visibily. Everything is working but the image does not display. I re did it 10 times no mater what i do, its not showing :( any idea ? Thanks !
Gonna try this out on my website ☺️. Thanks for great tutorial.
I love how you reply everyone in comment section. I hope you will be same 😊 to help by comments as well after you will have millions subscribers 😊. Congratulations for 5k + subscription.
Also i am your hidden fan hehe. Watching you for a long time but commenting for the first time.
Thanks Andrea 😄
Regards,
Memona 😊
You’re welcome 😊 Yeah, it's getting harder and harder to reply to everyone because many have issues I need to test out and find a solution and that's not feasible all the time. I'm doing my best tho and many people appreciate my efforts, case in point, you. Thanks for being here from the very start!
Hello again, thanks for this update.
I can get everything to work except the image to display. No matter how many times i go back and redo everything, i cannot get it to display.
;) ok, send me your email (to my email if you want it to be private and not be spammed by bots :) and I'll send you the json file
@@andreaegli Done, thank you.
Great video, thank you for making it feel so simple.
You are very welcome and thank you 😊
Heyy in this tutorial, after all the steps, the image cropped within the container "text" after hovering and not showing full image.. maybe i did something wrong or missed any steps?
I wish I could help but I would need to see how you implemented the code etc...
I use clamp for text and padding
Nice! Have you tried using it for images?
That's a great tut!🔥 But does anyone know how to do this exact animation but only when hovering the image takes the whole background + behind the text????? 🧐🧐🧐🧐🧐
Hey, Jeroen! thank you🤓 could you be more specific, I'm not sure I understand what you mean?
it works amazingly! Although do you know a way around if i have containers inside the container we are hovering? Cause it seems that we're not able to do that ahahha
Nice! 🤓 hmm, no idea yet, I need to try it out myself but I will let you know how it works, I’m sure there’s a way
@@andreaegli thanks Andrea! Just wanna say I’m a fan!
Can you make a tutorial on portals login widget how it works and how we can create and add portals
Do you have such a widget in mind?
Hey, I dont know why this is not working i did all the steps but its not working can you help me?
I need to see what you did, could be anything making it not work
Hola Andrea! Gracias por el vídeo :) Lo único tengo un pequeño problema, en lo que es el editor de elementor el efecto funciona perfectamente, pero cuando previsualizo mi página no funciona el efecto de hover, por lo que el video se ve en absoluto. He leido por aqui los comentarios algo de un signo, podria ser que me pasara algo parecido? No sé si podrias ayudarme, muchas gracias de antemano! Me encanta tu contenido 🥰
Lo solucioné! Pero por si a alguien más le pasa lo mismo que me pasó a mi voy a dejar el comentario con mi solución. Solo tuve que añadir el codigo css en Apariencia > Personalizar > CSS Adicional (en el dashboard de wordpress) ya que no sé por qué razón, solo en el apartado de css de elementor no funcionaba correctamente.
I'm curious if there is a workaround. I'm still using Elementor with sections and I followed your tutorial and everything works except the appearance of the picture while hovering. Do you have any tips?
Hmmm, should work with sections too but can you tell me, are your sections full width or boxed?
@@andreaegli full width. does it make a difference?
someone told me that it's not working with boxed content width but it could have been something else they did for it to not work. I would send you the JSON file but I'm using containers....or I can have a look at your project if you give me access. Up to you ;)@@bennitr.2992
@@andreaegli I would be happy if you could have a look over it! How can I get in contact to you?
@@bennitr.2992 Hey there, had the same issue here and it has been fixed with "full width"!
Hey your Opinon on Motion Page
i can't say much about it as I've only used it at a superficial level but it seems to be ok and easy to use once you get the hang of it. What I don't like is that they don't have tutorials and if you're a newbie to gsap, you'll find it hard
This code is also not working
It does work. Make sure to follow the steps as shown in the video
any tips on space between not working - so many times now i find its not pushing one element to the edge - i cant get your thing to work without having to use container inside container to push text on the right to the edge and than code doesnt work as its applied to container thats 50% wide
I can't give you any tips without seeing how you setup the whole thing. It's very difficult to figure it out from your explanation.
ok so when i get to @7:42 lets set container to full width - my spacing messsed up and text on right is moved to almost middle -- i cant do it with full width - but if container is not full width than the image doesnt apear.. container chnages colour but no image -- changing container to full width brings he image on roll over but than text position is messed up -- HEL:P
I need to see how you laid out the structure. If you can give me access to your website, I might be able to help. This way it's quite impossible....