<aside> 📌 This is the code I've used to add a CSS Scale hover effect on a Carrd.co website.

</aside>

• You can see this live on site deckof.carrd.co (each card grows in scale as you hover)
• Note: if you care about the styling, it does require a little bit of CSS knowledge.

Step 1

Add a classname the element you want to animate on hover. To do this, go to the Settings tab (cog icon) when editing the element, then find the Classes field. Let's assume you use the class name "animate" for this.

Step 2

Add the following CSS in an Embed section, set as Hidden, in Head:

<style>
.animate {transition: transform .2s;}
.animate:hover {transform: scale(1.05);}
</style>

Notes:

If you use a different class name in Step 1, change ".animate" to what you’re using, in the code above).

This procedure could be used for other CSS animation effects by changing the word "scale" in the code to another (see list).

@markbowley | extrasfor.carrd.co

Updated: Nov 2020

<aside> ♥️ Loved this tutorial? I’d be really grateful if you could tweet about it – in your own words is best, or you can use this link for a quicker way. Alternatively you could help me out by rating the tutorial on Gumroad.

</aside>