실전퍼블리싱 with jQuery(쇼핑몰 아이템 UI 호버 이펙트)

쇼핑몰 아이템 UI 호버 이펙트

---

주요 CSS 속성: flex, position, box-shadow, float, filter, :hover, :before, nth-of-type
주요 jQuery 속성: addClass, removeClass, toggleClass

toggleClass()
toggleClass()는 설정된 클래스명을 해당하는 요소가 가지고 있는지 판단하여 해당 요소가 있으면 이를 제거한다. 반대로 해당 요소가 없다면 이를 부여하는 매우 유용한 메소드이다.

예제보기

HTML

  <div class="item">
    <img src="./images/model-female.png" alt="">
    <div class="detail">
      <div class="title">
        <h2><em>Nightgown</em> Women's Designer Wear</h2>
        <span>$55.99</span>  
      </div>
      <div class="info">
        <div class="size">
          <label>Sizes</label>
          <span>XS</span>
          <span>S</span>
          <span>M</span>
          <span>L</span>
          <span>XL</span>
        </div>
        <div class="color">
          <label>Colors</label>
          <span></span>
          <span></span>
          <span></span>
          <span></span>
          <span></span>
        </div>
        <span class="like"></span>
      </div>
      <button class="add-cart">
        Add to Cart</button>
    </div>
  </div>

CSS

/* Google Web Font */
@import url('https://fonts.googleapis.com/css?family=Montserrat:300,400,500&display=swap');

/* Fontawesome 4.7 */
@import url('https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css');

body {
  font-family: 'Montserrat', sans-serif;
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: #eee;
}
a {
  text-decoration: none;
  color: #222;
}
h1,h2,h3,h4,h5,h6 {
  font-weight: normal;
}
/* item */
.item {
  border-radius: 5px;
  overflow: hidden;
  position: relative;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.162);
}
.item img {
  transition: 0.5s;
}
.item .detail {
  background-color: #f8f8f8;
  position: absolute;
  width: 100%;
  height: 50%;
  bottom: -170px;
  left: 0;
  transition: 0.5s;
  padding: 0 20px;
  box-sizing: border-box;
}
.item:hover .detail {
  bottom: 0;
}
.item:hover img {
  filter: blur(2px);
}

/* title */
.title {
  border-bottom: 1px solid #ddd;
  overflow: hidden;
}
.title h2 {
  font-size: 16px;
  color: #666;
  line-height: 1.2em;
  float: left;
}
.title h2 em {
  font-style: normal;
  display: block;
  font-weight: 500;
  color: #000;
}
.title span {
  color: crimson;
  float: right;
  margin-top: 20px;
  font-weight: 500;
}
.info {
  position: relative;
}
/* Size */
.size,
.color {
  font-weight: 600;
}
.size label,
.color label {
  display: block;
  margin-top: 5px;
}
.size span {
  font-size: 12px;
  margin: 5px 5px 5px 0;
  width: 15px;
  height: 15px;
  display: inline-block;
  text-align: center;
  line-height: 15px;
  padding: 3px;
  border-radius: 3px;
  cursor: pointer;
}
.size span.active,
.size span:hover {
  background-color: #000;
  color: #fff;
}
.size span,
.color span {
  transition: 0.3s;
}
.color span {
  margin: 5px 5px 10px 0;
  width: 17px;
  height: 17px;
  display: inline-block;
  border-radius: 5px;
  cursor: pointer;
  border: 1px solid #222;
}
.color span.active {
  border-radius: 50%;
}
.color span:nth-of-type(1) {
  background-color: #aaffaa;
}
.color span:nth-of-type(2) {
  background-color: #ffb5c5;
}
.color span:nth-of-type(3) {
  background-color: #ffecce;
}
.color span:nth-of-type(4) {
  background-color: #a3ffff;
}
.color span:nth-of-type(5) {
  background-color: #e3b3ff;
}
.add-cart {
  border: 1px solid #ddd;
  width: 100%;
  padding: 7px;
  background-color: #fff;
  cursor: pointer;
  border-radius: 5px;
}
.add-cart:hover {
  background-color: #000;
  color: #fff;
}
.like {
  cursor: pointer;
}
.like::before {
  content: '\f08a';
  font-family: fontawesome;
  color: #ccc;
  position: absolute;
  top: 10px;
  right: 0;
}
.like.active::before {
  content: '\f004';
  color: crimson;
}

JS

$('.size span, .color span').click(function () {
  $(this).addClass('active')
  $(this).siblings().removeClass('active')
})
$('.like').click(function () {
  $(this).toggleClass('active')
})