Mouse over - Forum | JoomShaper
Solved Templates

Mouse over

Asked by Katarina Karlström 4 months ago Last activity 4 months ago

Hello,

I hope I can get some help, I like the feature found in the template Unei with the four square boxes, how they move when I mouse over them. I'd like to have the same feature on my homepage but I seem not get it to work the same. It's about the four square boxes right underneath the big purple picture on top.
My boxes do look like they're moving but they are not moving upwards.

Here's the link to Unei page, how do I do this? Yes I know I can import the template to get the feature but I want to learn. Please help a rookie. Thank you.

https://www.joomshaper.com/joomla-templates/unei

Accepted answer

Marked as the solution
Atick Eashrak Shuvo Staff
4 months ago

Thank you for reaching out.

To achieve the same hover animation effect as shown in the Unei template, please add the following CSS to the Custom CSS field of the SP Page Builder Feature Box addon:

https://prnt.sc/dBEEMlwuwpbI

#addonId:hover{
    box-shadow: 0 50px 60px -20px rgba(0, 0, 0, 0.15) !important;
    transform: translateY(-10px);
}

This CSS creates the upward movement and shadow effect when hovering over the box.

Let us know if you need any further assistance.

2 more replies

Oldest first Newest first Most helpful
Katarina Karlström Asked this
4 months ago

Thank you so much! It works, it does move the box up a bit, just like in the tempate. :-)

Atick Eashrak Shuvo Staff
4 months ago

You're most welcome! 😊

Glad to hear it's working properly now and that the hover effect matches the template behavior.

Feel free to reach out anytime if you need help customizing anything else. Happy building!

Log in to reply.