대각선 박스 호버 효과

대각선 형태 상자들의 마우스 호버 효과입니다.

가상선택자를 이용하여 만들었습니다.

 

<div id="business">
  <div class="inwrap">
    <ul>
      <li class="s01">
        <div class="cont">
          <strong>Lorem</strong>
          <p>Lorem Ipsum is simply dummy text<br> of the printing and typesetting industry</p>
        </div>
      </li>
      <li class="s02">
        <div class="cont">
          <strong>Lorem</strong>
          <p>Lorem Ipsum is simply dummy text<br> of the printing and typesetting industry</p>
        </div>
      </li>
      <li class="s03">
        <div class="cont">
          <strong>Lorem</strong>
          <p>Lorem Ipsum is simply dummy text<br> of the printing and typesetting industry</p>
        </div>
      </li>
    </ul>
  </div>
</div>

 

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

li {
  list-style: none
}

a {
  text-decoration: none;
  color: #333
}

#business {
  margin: 0 auto;
  overflow: hidden;
}

#business .inwrap {
  margin: 0 -4%;
}

#business ul {
  width: 100%;
}
#business ul:after{
  content:"";
  display:block;
  clear:both;
}

#business ul li {
  position: relative;
  float:left;
  width: 33.33333333%;
  height: 500px;
  overflow:hidden;
  transform: skew(-12deg, 0);
  transition: all .2s ease;
}

#business ul li:before,
#business ul li:after{
  content: "";
  position: absolute;
  left:-20%;
  top: 0;
  width: 140%;
  height: 500px;
  transform: skew(12deg, 0);
  transition:all .3s ease;
  overflow: hidden;
}


#business .s01:before {
  background: url(https://t1.daumcdn.net/cfile/tistory/24068850536103E60A) no-repeat center ;
}

#business .s02:before {
  background: url(http://image.chosun.com/sitedata/image/201402/28/2014022801307_0.jpg) no-repeat center;
}

#business .s03:before {
  background: url(http://image14.hanatour.com/uploads/2016/05/%ED%95%B4%EB%B0%80%ED%84%B4-1.jpg) no-repeat center;
}

#business ul li div {
  position: relative;
  padding: 140px 0 0;
  color: #fff;
  text-align: center;
  transform: skew(12deg, 0);
  transition: all .3s ease;
  z-index: 10
}

#business ul li div strong {
  display: block;
  font-size: 30px;
  font-weight: 500;
}

#business ul li div p {
  margin: 0 auto;
  padding: 12px 0 40px;
  font-size: 15px;
  font-weight: 400;
}

#business.on ul li {
  width: 30%;
}

#business.on ul li.on {
  width: 40%;
}
#business.on ul li.on:after{
  opacity:1;
}

 

$(function() {

  $('#business li').mouseenter(function() {
    $('#business').addClass('on');
    $('#business li').removeClass('on');
    $(this).addClass('on');
  });

  $('#business li').mouseleave(function() {
    $('#business').removeClass('on');
    $('#business li').removeClass('on');
  });

});

 

jsfiddle에서 확인하기

 

https://jsfiddle.net/hyuckjin/bnfLa2qd/