| author | handle | source | date | likes | retweets | replies |
|---|---|---|---|---|---|---|
Ajay Yadav 🎯 |
@ATechAjay |
December 6, 2021 4:21 PM |
12 |
6 |
1 |
💚Day 2️⃣0️⃣ / 1️⃣ 0️⃣0️⃣ days of Master in CSS Design series!
💥Today we going to design a card with this awesome hoverable effect.
❓What is the main logic behind it?
#100DaysOfCode
[#webdev elopment](https://twitter.com/hashtag/webdevelopment)
#CodeNewbie
#webdev
Let me explain👇🧵 pic.twitter.com/setMme6ZKd
👀 We can make this hoverable effect using before and after pseudo-element.
👀 When we hover on before pseudo-element then it rotates 10 degrees.
👀 When we hover on after the pseudo-element then it rotates 18 degrees.
👀 When hovering on the card, then the image will be moved up to 45px.
👀 We can give the border around the image using top, left, right, and bottom properties.
👀 codepen: codepen.io/atechajay/pen/…