HOVER ON CONTAINER TO REVEAL IMAGE - Elementor Wordpress Tutorial Flex Container

แชร์
ฝัง
  • เผยแพร่เมื่อ 30 ก.ย. 2024

ความคิดเห็น • 75

  • @christopherodor2668
    @christopherodor2668 9 ชั่วโมงที่ผ่านมา +1

    Hi, i cant find the top container in the link anymore.

    • @christopherodor2668
      @christopherodor2668 8 ชั่วโมงที่ผ่านมา +1

      It’s fine code works now. Thank youu

  • @arnabmaiti6269
    @arnabmaiti6269 9 หลายเดือนก่อน +5

    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. ❣️

    • @andreaegli
      @andreaegli  9 หลายเดือนก่อน +1

      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!

    • @annakh07
      @annakh07 หลายเดือนก่อน +1

      your comment helped me . big thanks

  • @lushprod
    @lushprod 2 หลายเดือนก่อน +1

    Hi tnx for this, but on mobile the images are already shown. On desktop the hover works, is there a work around?

    • @andreaegli
      @andreaegli  2 หลายเดือนก่อน

      They show on mobile on purpose for a better UX.

  • @AGIDEAS-tb1qz
    @AGIDEAS-tb1qz 5 หลายเดือนก่อน +1

    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?

    • @andreaegli
      @andreaegli  5 หลายเดือนก่อน

      Hey! Thank you! I can't help without seeing your implementation, it could be anything

  • @emhedesign
    @emhedesign 6 หลายเดือนก่อน +1

    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?

    • @andreaegli
      @andreaegli  6 หลายเดือนก่อน

      Thank you! go to Dashboard > Appearance > Customize > Custom CSS and add your code in there

  • @BobyLeSombre2704
    @BobyLeSombre2704 6 หลายเดือนก่อน

    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 !

  • @QuintinMills
    @QuintinMills 7 หลายเดือนก่อน +1

    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.

    • @andreaegli
      @andreaegli  7 หลายเดือนก่อน +1

      ;) 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

    • @QuintinMills
      @QuintinMills 7 หลายเดือนก่อน

      @@andreaegli Done, thank you.

  • @Jeroenbdesign
    @Jeroenbdesign ปีที่แล้ว +2

    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????? 🧐🧐🧐🧐🧐

    • @andreaegli
      @andreaegli  ปีที่แล้ว +1

      Hey, Jeroen! thank you🤓 could you be more specific, I'm not sure I understand what you mean?

  • @tarinpaletes
    @tarinpaletes 5 หลายเดือนก่อน +1

    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 !

    • @andreaegli
      @andreaegli  5 หลายเดือนก่อน +1

      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

  • @neatandnetae
    @neatandnetae 6 หลายเดือนก่อน +1

    This code is also not working

    • @andreaegli
      @andreaegli  6 หลายเดือนก่อน

      It does work. Make sure to follow the steps as shown in the video

  • @SvenGabriel
    @SvenGabriel ปีที่แล้ว +2

    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

    • @andreaegli
      @andreaegli  ปีที่แล้ว

      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)

  • @Seemenowhere
    @Seemenowhere 9 หลายเดือนก่อน +1

    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?

    • @andreaegli
      @andreaegli  9 หลายเดือนก่อน

      I wish I could help but I would need to see how you implemented the code etc...

  • @maxencegelis
    @maxencegelis 7 หลายเดือนก่อน +1

    Hello ! This is working in the edit mod but when I go to the preview nothing work , any idea :) ?
    Thx

    • @andreaegli
      @andreaegli  7 หลายเดือนก่อน

      Hey! I can’t tell why without seeing your implementation of the code.

  • @joelgracia130
    @joelgracia130 ปีที่แล้ว +2

    Hey! I love all your videos, we need more people like you. Thanks for all!

    • @andreaegli
      @andreaegli  ปีที่แล้ว

      Hey Joel! Thank you so much and yes, I agree with you 😁 welcome!!! Let me know if you have any video requests 😉

  • @paula_8n180
    @paula_8n180 3 หลายเดือนก่อน

    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 🥰

    • @paula_8n180
      @paula_8n180 3 หลายเดือนก่อน

      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.

  • @ACEARYAN
    @ACEARYAN ปีที่แล้ว +1

    Hey, I dont know why this is not working i did all the steps but its not working can you help me?

    • @andreaegli
      @andreaegli  ปีที่แล้ว

      I need to see what you did, could be anything making it not work

  • @NaveedAhd
    @NaveedAhd ปีที่แล้ว +1

    Can you make a tutorial on portals login widget how it works and how we can create and add portals

    • @andreaegli
      @andreaegli  ปีที่แล้ว

      Do you have such a widget in mind?

  • @agencianaveguefeliz
    @agencianaveguefeliz 6 หลายเดือนก่อน +1

    Hi! Your channel is awesome! thank you for your time and your work! 🙏👏

    • @andreaegli
      @andreaegli  6 หลายเดือนก่อน

      Hey! Thank you so much for your kind words! 😊

  • @aybhjm
    @aybhjm 9 หลายเดือนก่อน

    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

  • @zhiyuenkhosummer4274
    @zhiyuenkhosummer4274 ปีที่แล้ว +1

    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

    • @andreaegli
      @andreaegli  ปีที่แล้ว +1

      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

    • @zhiyuenkhosummer4274
      @zhiyuenkhosummer4274 ปีที่แล้ว

      @@andreaegli thanks Andrea! Just wanna say I’m a fan!

  • @mykeajohnson4657
    @mykeajohnson4657 4 หลายเดือนก่อน

    I always wanted to do this! You are BOMB. Looks so pretty on my website. Thanks.

  • @franktielemans6624
    @franktielemans6624 ปีที่แล้ว +1

    I use clamp for text and padding

    • @andreaegli
      @andreaegli  ปีที่แล้ว

      Nice! Have you tried using it for images?

  • @bennitr.2992
    @bennitr.2992 ปีที่แล้ว +1

    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?

    • @andreaegli
      @andreaegli  ปีที่แล้ว

      Hmmm, should work with sections too but can you tell me, are your sections full width or boxed?

    • @bennitr.2992
      @bennitr.2992 ปีที่แล้ว +1

      @@andreaegli full width. does it make a difference?

    • @andreaegli
      @andreaegli  ปีที่แล้ว

      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

    • @bennitr.2992
      @bennitr.2992 ปีที่แล้ว

      @@andreaegli I would be happy if you could have a look over it! How can I get in contact to you?

    • @nicohussein2635
      @nicohussein2635 ปีที่แล้ว

      @@bennitr.2992 Hey there, had the same issue here and it has been fixed with "full width"!

  • @Art-01
    @Art-01 ปีที่แล้ว +1

    Thank u for all your tutorials. U do a amazing job✌️

    • @andreaegli
      @andreaegli  ปีที่แล้ว +1

      Thank you so much, Art! Let me know if there is something you would like to see on the channel🤓

  • @chathurajayadinu
    @chathurajayadinu ปีที่แล้ว +1

    Superb 😍 Thank you for sharing

    • @andreaegli
      @andreaegli  ปีที่แล้ว +1

      Thank you, Chathura!🤓

  • @monarmy20
    @monarmy20 8 หลายเดือนก่อน

    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 😊

    • @andreaegli
      @andreaegli  8 หลายเดือนก่อน +1

      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!

  • @Luzenify
    @Luzenify 11 หลายเดือนก่อน +1

    Fantastic. On Point. In love....!

    • @andreaegli
      @andreaegli  11 หลายเดือนก่อน

      Much appreciated!😁

  • @NaveedAhd
    @NaveedAhd ปีที่แล้ว +1

    Hey your Opinon on Motion Page

    • @andreaegli
      @andreaegli  ปีที่แล้ว

      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

  • @teuccio73
    @teuccio73 ปีที่แล้ว +1

    Precious. !

  • @flameboyxo
    @flameboyxo ปีที่แล้ว +1

    Loved it!!!

    • @andreaegli
      @andreaegli  ปีที่แล้ว

      Thank you, Dawood!🤓

  • @faisalalibhattifaisalalibh1396
    @faisalalibhattifaisalalibh1396 9 หลายเดือนก่อน +1

    NICE SECTION

    • @andreaegli
      @andreaegli  9 หลายเดือนก่อน

      Thanks

  • @victordiberto
    @victordiberto ปีที่แล้ว +1

    Amazing as always!

    • @andreaegli
      @andreaegli  ปีที่แล้ว

      Thank you so much, Victor!

  • @SultanaRazia-jx8mk
    @SultanaRazia-jx8mk ปีที่แล้ว

    Wow! Good content!❤❤💞💞

  • @bikechiatry365
    @bikechiatry365 ปีที่แล้ว +1

    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

    • @andreaegli
      @andreaegli  ปีที่แล้ว

      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.

  • @webdesignlondon
    @webdesignlondon ปีที่แล้ว +1

    Great video, thank you for making it feel so simple.

    • @andreaegli
      @andreaegli  ปีที่แล้ว

      You are very welcome and thank you 😊

  • @bikechiatry365
    @bikechiatry365 ปีที่แล้ว +1

    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

    • @andreaegli
      @andreaegli  ปีที่แล้ว

      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....