DEV Community 👩‍💻👨‍💻

Cover image for Expanding cards with CSS
Aneeqa Khan
Aneeqa Khan

Posted on

Expanding cards with CSS

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>
Enter fullscreen mode Exit fullscreen mode

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;
    }
Enter fullscreen mode Exit fullscreen mode

Images will begin showing just like this
img-cards

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;
  }
Enter fullscreen mode Exit fullscreen mode

and that's it! You get very pleasing expanding cards.


Thank you for reading!
Feel free to connect on Twitter

Top comments (4)

Collapse
 
amiceli profile image
amiceli

Simple and beautiful, well done ;)

Collapse
 
aneeqakhan profile image
Aneeqa Khan Author

Thank you!

Collapse
 
michaeltharrington profile image
Michael Tharrington (he/him)

These look so cool! Lovin' this style. 🙌

Collapse
 
aneeqakhan profile image
Aneeqa Khan Author

Thank you!

🌚 Browsing with dark mode makes you a better developer by a factor of exactly 40.

It's a scientific fact.