[CSS] 이미지 Hover 효과

영화 포스터 이미지에 마우스 오버를 했을 때, 영화 정보를 표시할 수 있는 hover 기능을 사용해보겠습니다. Demo

HTML 파일 작성

• img 태그에 포스터 이미지 경로를 입력하고
• 마우스 오버시, 표시할 내용을 inner-content class 안에 작성합니다.

<div class="card">
  <img
    src="https://image.tmdb.org/t/p/w300_and_h450_bestv2/5AFKp85Bka4mQeaeVNs3evyMYYE.jpg" 
 alt="포스터 이미지"
  >
  <div class="inner-content">
    <span class="title">라이프 오브 파이</span>
    <hr>
    <span class="overview">
      인도에서 동물원을 운영하던 ‘파이’의 가족들은 정부의 지원이 끊기자 캐나다로 이민을 준비한다.
      동물들을 싣고 캐나다로 떠나는 배에 탑승한 가족들.
    </span>
  </div>
</div>

CSS 효과 넣기

.card {
  position: relative;
  background: linear-gradient(180deg, #441DB2 0%, #0d0425 100%);
  width: 13rem;
  overflow: hidden;
  box-shadow: 15px 15px 25px black;
}
.card img {
  width: 100%;
  height: auto;
  /* 포스터 크기 조정을 위해 scale 조정 */
  transform: scale(1.1);
  transition: all 0.25s linear;
}
.card:hover img {
  opacity: 0.2;
  transform: scale(1.25);
}
.card .inner-content {
  width: 80%;
  opacity: 0;
  transform: translateX(-50%) translateY(-50%);
  position: absolute;
  top: 80%;
  left: 50%;
  transition: all 600ms ease;
  color: white;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.card:hover .inner-content {
  opacity: 1;
  top: 50%;
}
.card .inner-content .title {
  font-size: 1.2rem;
  font-weight: 700;
}
.card .inner-content .overview {
  font-size: 0.9rem;
  font-weight: 300;
}
.card .inner-content hr {
  border-top: 1px solid #f1f1f1;
  width: 100%;
}