대각선 박스 호버 효과

21 Feb 2019

대각선 상자 호버 효과

대각선 형태 상자들의 마우스 호버 효과입니다. 가상선택자를 이용하여 만들었습니다.

html

<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>

css

* {
  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(http://cfile4.uf.tistory.com/image/24068850536103E60A6C1A) no-repeat center ;
}
#business .s01:after{
  background:url(https://cbmpress.com/toronto/wp-content/uploads/sites/3/2017/09/oen.jpg) no-repeat center / cover;
  opacity:0;
}

#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;
}

js

$(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에서 보기

Twitter Facebook Google+