- This topic has 5 replies, 2 voices, and was last updated 6 years, 10 months ago by
.
Hello,
Is it possible to make a column animate on hover? I see where you can set animations for when the page loads. But I’m wanting certain elements of my page to only animate when you hover over it. Is this possible?
Thank you,
Derek
Hi Derek,
Thank you for your question.
You can set a different background image on hover for column as shown in the attached screenshots.
Best regards,
Shufflehound teamI’m talking about the slight hover animation on your demo page here: https://jevelin.shufflehound.com/hello/
When you hover over your demos, (Education, Startup, Construction, etc..), your images slightly move up and a shadow appears around it.
I really love this feature; it’s one of the main reasons I bought your theme.
Can you please tell me how I can recreate that?
I will include the link to my page I want this feature on in the private info field.
Thanks,
Derek
That effect is created using below custom CSS code.
#demos .vc_col-sm-4:hover { top: -6px; }You can achieve it by adding the following CSS code in the Custom CSS code option of your theme on the below path.
Admin Area -> Appearance -> Theme Settings -> Custom Code -> CSS Code
.sh-section-e0edcd87dce567c226265b76cdd05646 .sh-column:hover { top: -6px; } .sh-section-e0edcd87dce567c226265b76cdd05646 .sh-column { transition: 0.3s all ease; top: 0; }Thank you very much! And how do I add this effect to other elements of my website?
Do I replace the ” .sh-section-e0edcd87dce567c226265b76cdd05646 .sh-column ” portion of the code you supplied above with whatever id or class I’m trying to add the effect to?
Do I replace the ” .sh-section-e0edcd87dce567c226265b76cdd05646 .sh-column ” portion of the code you supplied above with whatever id or class I’m trying to add the effect to?
Yes
