Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #1161542

    Hello Enfold support team,

    is it possible to make columns slightly bigger only on mouse hover?
    Thanks!

    #1161589

    Hey Flow9999,
    Yes, this is possible. Here is an example for a 1/3 column, but please note this is very general and will affect all 1/3 columns on your site, I recommend adding a custom class to your columns and adjusting the css to suit. If you would like a hand with this please apply the custom class and add a link to the page, or include an admin login in the Private Content area so we can demonstrate.
    The demo css is:

    .flex_column.av_one_third:hover {
    	animation: grow 2s;
    	animation-fill-mode: forwards;
    	position: relative;
    	z-index: 50;
    }
    @keyframes grow {
      to {
          transform: scale(1.2)
      }
    }

    So the “keyframes” is how much the column will “grow”, please note that the word “grow” here means nothing, as long as it matches the rest of your css it can be any word.
    The animation is set to 2s to compete, adjust to suit.
    The animation-fill-mode: forwards; is the trick to “hold” the animation while “hover” is activated, otherwise it will go back to the regular size after 2s.
    The “z-index” is needed otherwise, some columns will be under the others.
    Here is a screenshot of the expected results:
    2019-12-01-045925

    Best regards,
    Mike

    #1161907

    Beautiful solution! Works like a charm. I changed animation time to 0.5s and scaling to 1.1, then I got the result I wished for :-)

    Thanks alot Mike!

    #1162174

    Hi,
    Glad we were able to help, we will close this now. Thank you for using Enfold.

    For your information, you can take a look at Enfold documentation here
    For any other questions or issues, feel free to start new threads in the Enfold forum and we will gladly try to help you :)

    Best regards,
    Mike

Viewing 4 posts - 1 through 4 (of 4 total)
  • The topic ‘How to make columns bigger on hover’ is closed to new replies.