How To Make a Hover Card Like a PRO in Elementor

Поділитися
Вставка
  • Опубліковано 8 лют 2025
  • In this video, I show you how to make an amazing hover card that slides up text over the image with easy-to-follow steps using containers in WordPress Elementor.
    Source Code
    urielsoto.com/...

КОМЕНТАРІ • 30

  • @jkwalzo
    @jkwalzo 22 дні тому

    On a platform with thousands of people "teaching" web design/code/elementor/etc, you sir, actually teach it. Subbed.

    • @UrielSoto
      @UrielSoto  22 дні тому +1

      Thank you. I teach how I would like to be taught.

  • @Boldogsagtar
    @Boldogsagtar 7 місяців тому +1

    One of the clearest explanations of my life. Thank you so much for your work!

  • @zerobambiro
    @zerobambiro 11 місяців тому +1

    I will try that one in a carousel. Liked that you showed the result at the beginning of the video. Easy like for me

  • @zackary_michael
    @zackary_michael 5 місяців тому

    Very in-depth, love how you explain the css afterwards!

  • @andreasericsson7472
    @andreasericsson7472 9 місяців тому

    This is what we need, simple, explanatory, and beautiful results!

  • @mdqmatias
    @mdqmatias Рік тому +7

    This is nice. I probably would add some button on mobile or something that indicates that you need to click to expand, cause in mobile doesn't exist hover.

    • @UrielSoto
      @UrielSoto  Рік тому +1

      Yeah that is true. Maybe an arrow

  • @bobbypalmer2460
    @bobbypalmer2460 Рік тому +2

    nice tutorial - thanks for sharing 🙂

  • @tonywilliams6906
    @tonywilliams6906 11 місяців тому

    This was very helpful. I did have to change some code on line 26. to "flex-end" instead of end. To get the hover effect to work correctly.

  • @edimainwang1255
    @edimainwang1255 Рік тому

    Great tutorial. Thank you for this.

  • @TEI-Alex
    @TEI-Alex Рік тому

    thanks for sharing - nice tutorial !!

  • @pixelgap
    @pixelgap Рік тому

    Excellent. Thank you

  • @Joseleocol
    @Joseleocol 10 місяців тому +1

    This is masterful

  • @vanessapiquero9847
    @vanessapiquero9847 10 місяців тому

    You're AMAZING!

  • @mahendravarma6964
    @mahendravarma6964 2 місяці тому

    Great Explanation 👌👌...But the title means that free elementor, for custom css need elementor pro.
    We need more explore on "free version of elementor" not into pro....could you please do some exposures on the same

  • @gsmwikipedia
    @gsmwikipedia 4 місяці тому

    Thanks.

  • @shaban8888
    @shaban8888 Місяць тому

    How can we set image instead of heading, text and button. I triead but failad. What to do? Should I make any changes in the code?

  • @ShepherdOutdoorMedia
    @ShepherdOutdoorMedia 5 місяців тому

    when i used this it looked great on the back end. on the front end it put the sub containers side by side, so instead of my 3 block it turned it into 6. Not sure how i could fix it

  • @zahrafarmad6991
    @zahrafarmad6991 10 місяців тому

    Thanks for this great video. Can you say what did you write on typography for size? I can't see it correctly.

  • @julianmantilla1265
    @julianmantilla1265 Місяць тому

    Alguien sabe por que al implementar el codigo CSS pierdo el estilo de las fuentes personalizadas?

  • @mikezero7422
    @mikezero7422 8 місяців тому

    how can I do it without containers? I find using new containers makes the website load slow on the backend.

  • @lushprod
    @lushprod 8 місяців тому

    tnx! i got a problem with my header, i have a fullscreen header but after the hoover effect it changes and gets really small! any ideas?

    • @UrielSoto
      @UrielSoto  8 місяців тому

      Check the css to see any conflicts.

  • @omarhamdii
    @omarhamdii Рік тому +1

    Great video can you just zoom a little bit please

    • @UrielSoto
      @UrielSoto  Рік тому

      I'm definitely working on that. Will do better next time.

    • @omarhamdii
      @omarhamdii Рік тому

      @@UrielSoto thank you

  • @zerobambiro
    @zerobambiro 11 місяців тому

    Two problems i have here. Don't know why there must be a transition in between instead of just moving the text up. Looks really weird when the text disapears and apears back again.

    • @Boldogsagtar
      @Boldogsagtar 7 місяців тому

      To avoid the gradient layer choose a monocolor or transparent.