How to Grow Column on Hover in Elementor - WpBuilt 480622971805823
You are currently viewing How to Grow Column on Hover in Elementor

How to Grow Column on Hover in Elementor

  • Kenoma
  • March 9, 2022
  • 13 Comments

This Post Has 13 Comments

  1. Anikesh AK

    selector:hover {
    transition: all .3s linear;
    transform: scale(1.04);
    z-index: 1;
    }
    selector {
    transition: 0.3s ease;
    }

  2. Guillaume Grenet

    Hello,

    I arrive late but I would like to know if this line of code could be adapted to a gallery of images?
    I would like the mouse hover to have a small narrowing effect as on the following gallery:
    https://gradastudio.com/vara/portfolio-pinterest/

    Regards

  3. Guillaume

    Hello,

    I arrive late but I would like to know if this line of code could be adapted to a gallery of images?
    I would like the mouse hover to have a small narrowing effect as on the following gallery:
    https://gradastudio.com/vara/portfolio-pinterest/

    Regards

  4. Maria

    selector:hover {
    transition: all .4s ease-in-out;
    transform: scale(1.2);
    cursor: pointer;
    z-index: 1;
    }
    selector {
    transition: 0.4s ease;
    }

  5. David

    Has anyone found some code that will apply to the background image only?
    thanks so much in advance…

  6. Nikola

    Is there a way to apply this only to the background image of a section? Thanks in advance.

  7. Philipp

    Hey 🙂 The code works great, but I agree with Michelle. I would also like to have the column to ease out slower. (The zoom-in effect is something else and not related to the hovering effect.) With the given code the column eases in slowly when you hover over it but (as Michelle pointed out) the column jumps back immediately (in 0 seconds) when the mouse leaves the column. Here it would be great if the column also eases out slowly when the mouse leaves the column. Do you have any suggestions how to change the code to include this effect?
    Thanks a lot 🙂

    1. Elementor Resources

      Hello Philip!

      I think Nico has already pointed out a good solution for this. Check his comment below 😀

  8. Carlos Vargas

    Thanks Nico that was exactly what I was looking for

  9. Nico

    Michelle Meyer:

    selector:hover {
    transition: all .2s ease-in-out;
    transform: scale(1.2);
    cursor: pointer;
    z-index: 1;
    }
    selector {
    transition: transform .2s;
    }

  10. Elementor Resources

    Hi Michelle 🙂 You can do this by going to the column or setting you to want to animate. Click the Advanced tab, go to motion effect pick the zoom-in effect ( if that is the effect you want to use ) then change the animation duration to slow and you can control the delay in animation manually in animation delay, just enter the delay in millisecond.

Leave a Reply

×

Cart