Hello Enfold support team,
is it possible to make columns slightly bigger only on mouse hover?
Thanks!
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:
Best regards,
Mike
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!
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