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

Поделиться
HTML-код
  • Опубликовано: 12 дек 2024

Комментарии • 77

  • @arnabmaiti6269
    @arnabmaiti6269 Год назад +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  Год назад +2

      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 4 месяца назад +1

      your comment helped me . big thanks

  • @SvenGabriel
    @SvenGabriel Год назад +3

    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)

  • @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 😉

  • @agencianaveguefeliz
    @agencianaveguefeliz 8 месяцев назад +1

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

    • @andreaegli
      @andreaegli  8 месяцев назад

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

  • @mykeajohnson4657
    @mykeajohnson4657 7 месяцев назад

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

  • @webdesignlondon
    @webdesignlondon Год назад +1

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

    • @andreaegli
      @andreaegli  Год назад

      You are very welcome and thank you 😊

  • @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

  • @victordiberto
    @victordiberto Год назад +1

    Amazing as always!

  • @Luzenify
    @Luzenify Год назад +1

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

  • @franktielemans6624
    @franktielemans6624 Год назад +1

    I use clamp for text and padding

    • @andreaegli
      @andreaegli  Год назад

      Nice! Have you tried using it for images?

  • @teuccio73
    @teuccio73 Год назад +1

    Precious. !

  • @SultanaRazia-jx8mk
    @SultanaRazia-jx8mk Год назад

    Wow! Good content!❤❤💞💞

  • @faisalalibhattifaisalalibh1396
    @faisalalibhattifaisalalibh1396 11 месяцев назад +1

    NICE SECTION

  • @AGIDEAS-tb1qz
    @AGIDEAS-tb1qz 7 месяцев назад +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  7 месяцев назад

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

  • @flameboyxo
    @flameboyxo Год назад +1

    Loved it!!!

  • @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!

  • @aybhjm
    @aybhjm Год назад

    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

  • @monarmy20
    @monarmy20 11 месяцев назад

    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  11 месяцев назад +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!

  • @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 8 месяцев назад +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  8 месяцев назад +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

  • @emhedesign
    @emhedesign 8 месяцев назад +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  8 месяцев назад

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

  • @lushprod
    @lushprod 5 месяцев назад +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  5 месяцев назад

      They show on mobile on purpose for a better UX.

  • @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

  • @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?

  • @Freelancermukta-u6h
    @Freelancermukta-u6h Месяц назад +1

    i need your help, because 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 don't work
    any suggestion?

    • @andreaegli
      @andreaegli  Месяц назад

      you can purchase the template here: ohwow.club/template/

  • @paula_8n180
    @paula_8n180 6 месяцев назад

    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 6 месяцев назад

      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.

  • @BobyLeSombre2704
    @BobyLeSombre2704 8 месяцев назад

    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 !

  • @maxencegelis
    @maxencegelis 9 месяцев назад +1

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

    • @andreaegli
      @andreaegli  9 месяцев назад

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

  • @christopherodor2668
    @christopherodor2668 2 месяца назад +1

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

  • @Seemenowhere
    @Seemenowhere Год назад +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  Год назад

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

  • @QuintinMills
    @QuintinMills 9 месяцев назад +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  9 месяцев назад +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 9 месяцев назад

      @@andreaegli Done, thank you.

  • @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"!

  • @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

  • @neatandnetae
    @neatandnetae 8 месяцев назад +1

    This code is also not working

    • @andreaegli
      @andreaegli  8 месяцев назад

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