2024-03-03 - TODO, 마우스오버효과(이미지확대)

📅 2024-03-03

---

TODO - 3/4

[프로젝트 HTML CSS JS]

• 카페 상세페이지 (100%)
• 사진 마우스 hover 시 확대
  • 메인페이지 (100%)
  • 검색페이지 (100%)
  • 나의 찜 목록 (0%)
  • 상세페이지 내 사진(할지말지 고민중)

---

해야할거

검색 카페 목록 / 찜한 카페 목록 페이지네이션
article detail 페이지 (뷰어 적용 후에)
제휴문의
반응형 (ㅠ)

• 메인페이지 무조건 반응형 해야함
  - 브라우저 크기 작아지면 검색창이 사라짐
  - 날씨 문구 짤림
  사진 마우스 hover 시 확대 - 나의 찜 목록 (0%)

---

마우스오버효과(이미지확대)

나의 요구사항

메인페이지의 카페이미지와 카페 검색결과 목록에서 링크화 된 이미지들은 마우스오버효과를 주고 싶다!

해결방법

이미지에 마우스를 올렸을 때 이미지가 확대되는 효과

 <div class="a">
      <img src="images/image-01.jpg" alt="">
    </div>

먼저 이미지 태그를 부모 요소로 감싸야 함!
이미지에 직접 class를 준 후, class한테 직접 아래 css를 적용시키니 안돼서
기존에 구현 해논 html 소스에서 이미지 태그들의 클래스와 이미지를 부모자식관계로 고쳐야 했음...

.a img {
  transition: all 0.2s linear;
}
.a:hover img {
  transform: scale(1.4);
}

이미지가 확대되지만 전체 크기는 변하지 않게 하고 싶다면 overflow: hidden 추가

.a {
  width: 400px;
  margin: 0px auto;
  overflow: hidden;
}

참고한 사이트