Open on Hover Accordion Style - Reveal Info - CSS

Sdílet
Vložit
  • čas přidán 18. 06. 2024
  • This is how to have an accordion style reveal of content - when hovering - without using accordions.
    This is Mind-blowing!
    @media (min-width: 768px) { /* Disable on mobile */
    .hovx {
    transition: width ease-in-out 0.5s;}
    .hovx:hover {
    width: 50%;
    }
    👉 Grab our $1 Business Packs: learn.websquadron.co.uk/#packs
    👉 WordPress Hosting: be.elementor.com/visit/?bta=2...
    👉 The Pro Page Builder: be.elementor.com/visit/?bta=2...
    Need 1-2-1 Support: learn.websquadron.co.uk/#support
    Join our Facebook Group: / websquadron
    Get Code Snippets Pro: r.freemius.com/10565/3304295/
  • Jak na to + styl

Komentáře • 13

  • @pixelgap
    @pixelgap Před 20 dny +1

    Excellent. Thank you

  • @robertorosello5861
    @robertorosello5861 Před 20 dny

    Brilliant !!!

  • @JurgenMorel
    @JurgenMorel Před 21 dnem

    Again a great tutorial. Thanks Imran

  • @ElementoryMyDearWatson
    @ElementoryMyDearWatson Před 21 dnem

    Really great Imran, well done

  • @dakonni86
    @dakonni86 Před 16 dny

    Hey Imran,
    Thank you for your awesome inspiration!
    I have an issue with the "accordion"
    When I insert the click to action widget and insert a text, the image always get larger (the height) as soon it's not hovered anymore because it seems the text stretches all over the 12,5% image.
    Is there a solution? :-/

    • @dakonni86
      @dakonni86 Před 16 dny

      Welllllll one minute later I have the solution. 😀
      Just put a height in the CTA Widget under Style and that's it.

    • @websquadron
      @websquadron  Před 16 dny

      Just saw that you put the solution :)

    • @dakonni86
      @dakonni86 Před 16 dny

      @@websquadron Thanks for the quick response.
      Do you plan to do a video how this kinda style can also work for mobile?

    • @websquadron
      @websquadron  Před 16 dny

      @@dakonni86 because it’s a mobile - I wouldn’t show all of the containers unless you want them below one another.

    • @dakonni86
      @dakonni86 Před 16 dny

      @@websquadron I kinda couldn't manage to put them below each other...
      Let's call it an image accordion. So the horizontal image accordion like you showed works very good.
      But the vertical one I couldn't setup.
      Is this maybe something for another video? 😜
      And for the horizontal: I realized that you text shouldn't be too long. Because it shrinks vertically to your 12.5% and the exceed the height from the widget you entered.

  • @SamWereb
    @SamWereb Před 21 dnem +2

    Come back, @OoohBoi. You are missed.

    • @websquadron
      @websquadron  Před 21 dnem

      Huh?

    • @ElementoryMyDearWatson
      @ElementoryMyDearWatson Před 21 dnem

      @@websquadron OoohBoi was an Elementor content creator that catered to more experienced elementor developers by using more custom code like this. A couple of years ago he said he was abandoning elementor for bricks, but has seemed to have disappeared completely as his last video was over a year ago. I'd post the URL to his channel but CZcams would probably delete my comment. Like you, he had some good stuff. Just search for OoohBoi if you are interested.