실전퍼블리싱(hover하면 상세설명 나타나는 상품목록)

hover하면 상세설명 나타나는 상품목록

예제보기

HTML

  <div class="items">
    <div class="item">
      <img src="./images/hoverImg1.jpg" alt="선풍기">
      <div class="caption">
        <h2>22년형 르젠 BLDC 앱연동 선풍기</h2>
        <p>
          신선한 바람, 신선한 하루<br>
          35CM BLDC RIMOTE CONTROL SMART FAN<br>
          르젠 BLDC 저소음 스마트 선풍기
        </p>
        <p>Price : <s>58,000</s> → 51,000</p>
        <a href="javascript:viod(0)">View Details</a>
      </div>
    </div>
    <div class="item">
      <img src="./images/hoverImg2.jpg" alt="애플워치">
      <div class="caption">
        <h2>애플워치7 41mm GP</h2>
        <p>
          애플워치7 41mm GP<br>
          스타라이트 알루미늄 케이스<br>
          스타라이트 스포츠 밴드
        </p>
        <p>Price : <s>499,000</s> → 464,000</p>
        <a href="javascript:viod(0)">View Details</a>
      </div>
    </div>
    <div class="item">
      <img src="./images/hoverImg3.jpg" alt="선풍기">
      <div class="caption">
        <h2>넥밴드 3세대 목걸이 휴대용 선풍기</h2>
        <p>
          210&#176; 빈틈없이 바람을 품다<br>
          아이스볼 3세대 넥밴드 선풍기<br>
          FC171
        </p>
        <p>Price : 39,800</p>
        <a href="javascript:viod(0)">View Details</a>
      </div>
    </div>
  </div>

CSS

/* Google Web Font */
@import url('https://font.googleapis.com/css?family=Raleway&display=swap');

body {
  font-family: 'Raleway', 'sans-serif';
  color: #222;
  line-height: 1.5em;
  margin: 0;
  font-weight: 300;
}
a {
  color: #222;
  text-decoration: none;
}

.items {
  margin-top: 200px;
  text-align: center;
}
.item {
  display: inline-block;
  width: 300px;
  height: 300px;
  position: relative;
  margin: 10px;
  border: 1px solid #ddd;
}
.item img{
  width: 100%;
}
.caption {
  position: absolute;
  width: 300px;
  height: 300px;
  top: 0;
  left: 0;
  background-color: rgba(24, 24, 24, 0.801);
  color: #fff;
  padding: 20px;
  box-sizing: border-box;
  padding-top: 40px;
  opacity: 0;
  transition: 0.5s;
}
.caption h2{
  font-weight: 800;
}
.caption p{
  margin-top: 15px;
  font-size: 13px;
}
.caption a {
  display: inline-block;
  color: #fff;
  background-color: teal;
  padding: 7px;
  border-radius: 3px;
  margin-top: 15px;
}
.caption a:hover {
  background-color: #fff;
  color: #000;
}
.item:hover .caption {
  opacity: 1;
}