CSS로 확장 카드

YouTube에서 훌륭한 과정을 보았고 직접 몇 가지 프로젝트를 시도하고 싶었습니다.

개요

사진 카드를 만들고 호버에서 해당 카드를 확장합니다.

구현

한 섹션에 다섯 장의 사진을 배치하는 것으로 시작했습니다.

  <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>

그리고 그것을 스타일

    section {
      display: flex;
      flex-direction: row;
    }
    img {
      width: 50px;
      height: 340px;
      object-fit: cover;
      border-radius: 40px;
      margin-right: 10px;
      cursor: pointer;
    }

다음과 같이 이미지가 표시되기 시작합니다.


이제 너비 속성이 있는 선택기:hover를 추가하고 카드 너비를 늘렸습니다. 또한 부드럽게 만들기 위해 transition 속성을 추가했습니다.

  img {
    ...
    transition: width 0.5s ease-in-out;
  }
  img:hover {
    width: 400px;
  }

그리고 그게 다야! 매우 만족스러운 확장 카드를 얻을 수 있습니다.


읽어 주셔서 감사합니다!
부담없이 접속하세요