Expanding cards with CSS

Aneeqa Khan - Sep 27 '22 -

- Dev Community

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