| author | handle | source | date | likes | retweets | replies |
|---|---|---|---|---|---|---|
Ajay Yadav 🎯 |
@ATechAjay |
December 18, 2021 8:24 AM |
8 |
11 |
1 |
💚Day 3️⃣2️⃣ / 1️⃣ 0️⃣0️⃣ days of Master in CSS Design series!
💥Today we going to design a hoverable card (similar to day 31).
❓What's the main logic behind it with the codepen link?
#100DaysOfCode
#webdevelopment
Let me explain!👇🧵 pic.twitter.com/E3B1GdkXpH
→ We have used 4 properties for this design.
1️⃣ white border around the image.
→ So, a white border around the image can be created using padding property.
2️⃣ Now, when we hover over the card the image will be rotating as well as scaling.
3️⃣ Initially, We have to hide the text content.
→ You have to set the opacity to 0.
4️⃣ Finally, when we hover over the container, then the text content should be displayed.
→ codepen link: