Dawn - Adding animations to Multi Column

Diarna-Official
Excursionist
33 0 7

Hey there!

 

Been trying to plan out some interesting aspects for my website, and stumbles across this website: https://shopkyrajewels.com/. And, on the home page, at the very top, they have a little section on "free shipping" and "no green skin" and so on. However, if one hovers their mouse over the symbols for each respective text, for example, hovering the cursor on the rocketship as seen beside the "free shipping" section, the rocket ship slightly pops out. I assume that they somehow changed their multicolumn section to add the animation. Does anyone know how to add a similar animation? 

 

Kind regards, 

Damiano

Replies 3 (3)

GemPages
Shopify Partner
5587 1261 1192

Hello @Diarna-Official ,

 

Can you give me your Store URL( with pass if your store password is enabled) so I can custom it for you?

Kind & Best regards,
GemPages Support Team

GemPages - Build any high-converting store pages for any business


- If you find my reply helpful, please hit Like and Mark as Solution
- Get connected: App Store | Blog | Community | Help Center
Diarna-Official
Excursionist
33 0 7

@GemPages Since we are somewhat new to Shopify, I asked my brother (who is also running this website with me) if he would be fine with you having the access to our account. And he said he would rather not. Is there any chance you could explain how to do it, otherwise, I can re-discuss it with him. 

 

Thank you for getting back to me

lucifferrr
Visitor
2 0 0

To add a similar animation to your multicolumn section, you can use CSS3 transformations. 

This will cause all of the columns in your multicolumn section to slightly pop out when you hover over them. You can adjust the scale factor and the transition duration to achieve the desired effect.