Mouse Over
Katarina Karlström
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.
Atick Eashrak Shuvo
Accepted AnswerThank 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:
#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.
Katarina Karlström
Accepted AnswerThank you so much! It works, it does move the box up a bit, just like in the tempate. :-)