I saw a brilliant course by @florinpop17 on YouTube and wanted to try some projects myself.
Overview
Create a cards of pictures and expand that card on hover.
Implementation
I started by placing five pictures in one section.
<section>
<img src="assets/hawai.webp" />
<img src="assets/bamboo-forest.webp" />
<img src="assets/cappadocia.webp" />
<img src="assets/Lake-Croatia.webp" />
<img src="assets/mount-fuji.webp" />
</section>
and styled it
section {
display: flex;
flex-direction: row;
}
img {
width: 50px;
height: 340px;
object-fit: cover;
border-radius: 40px;
margin-right: 10px;
cursor: pointer;
}
Images will begin showing just like this
Now I added :hover selector with width property and increased the card width. I have also added a transition property to make it smooth.
img {
...
transition: width 0.5s ease-in-out;
}
img:hover {
width: 400px;
}
and that's it! You get very pleasing expanding cards.
Thank you for reading!
Feel free to connect on Twitter
Top comments (4)
Simple and beautiful, well done ;)
Thank you!
These look so cool! Lovin' this style. 🙌
Thank you!