[수업노트](20.11.10)D+23 상품이미지 view박스 및 hover효과/ text-transform:uppercase

※ 상품이미지 hover효과 주기

- .img-box에 position:absolute;를 준다

- transition 이용하여

  opacity,transform,background-color 애니메이션 지정

- text-transform:uppercase;는 대문자 변환 속성

 

 

 

 

 

 

 

<div class="box-1">
  <div class="img-box">
    <img src="http://bnx.oa.gg/img/bnx_16fw_visual_01_list.jpg" alt="">
  </div>
  <div class="prod-name">단가라 OPS</div>
  <div class="prod-price">19,800</div>
</div>

 

body {
  margin:0;
}

.img-box > img {
  width:100%;
  display:block;
}

.box-1 {
  margin-top:100px;
  width:300px;
  margin:0 auto;
}

.box-1 {
  cursor:pointer;
}

.box-1 > *:not(:first-child) {
  text-align:center;
  font-weight:bold;
  margin-top:10px;
}

.box-1 > .prod-name {
  font-size:1.4rem;
}

.box-1 > .prod-price {
  font-size:1.4rem;
}

.box-1 > .prod-price::after {
  content:"원";
  font-size:1rem;
}

.box-1 > .img-box {
  position:relative;
  overflow:hidden;
}

.box-1 > .img-box::after {
  content:"";
  display:block;
  background-color:rgba(0,0,0,0);
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  transition:background-color 0.5s;
}

.box-1 > .img-box::before {
  content:"view";
  text-transform:uppercase;
  font-weight:bold;
  position:absolute;
  top:50%;
  left:50%;
  color:white;
  transform:translateX(-50%) translateY(-50%);
  font-size:1.2rem;
  border:5px solid white;
  padding:10px;
  border-radius:10px;
  z-index:1;
  opacity:0;
  transition:opacity 0.5s;
}

.box-1:hover > .img-box::after {
  background-color:rgba(0,0,0,.5);
}

.box-1:hover > .img-box::before {
  opacity:1;
}

.box-1 > .img-box > img {
  transition:transform 0.5s;
  /*
  position:relative;
  z-index:-1;
  */
}

.box-1:hover > .img-box > img {
  transform:scale(1.2);
}