استایل زیبا با less برای هاور - Stylish hover effects (نمونه 3) : باز شدن از هم

*,

*:before,

*:after {

  -webkit-box-sizing: border-box;

  -moz-box-sizing: border-box;

  box-sizing: border-box;

}

section {

  font-family: 'Open Sans', sans-serif;

  height: 350px;

  position: relative;

  background-clip: fixed;

  background-repeat: no-repeat;

  background-size: cover;

  background-position: center center;

  overflow: hidden;

  width: 94%;

  margin: 0 auto 30px;

}

section a {

  text-transform: uppercase;

  font-weight: 800;

  text-align: center;

  text-decoration: none;

  color: #fff;

  display: block;

  font-size: 4.875em;

}

section.p2 {

  background-image: url(3.jpg);

}

section.p2 a {

  width: 216px;

  height: 94px;

  line-height: 94px;

  position: absolute;

  top: 50%;

  left: 50%;

  margin-left: -108px;

  margin-top: -47px;

  -webkit-transition: all 0.5s ease-out;

  -moz-transition: all 0.5s ease-out;

  -ms-transition: all 0.5s ease-out;

  -o-transition: all 0.5s ease-out;

  transition: all 0.5s ease-out;

  color: transparent;

}

section.p2 a:after,

section.p2 a:before {

  -webkit-transition: inherit;

  -moz-transition: inherit;

  -ms-transition: inherit;

  -o-transition: inherit;

  transition: inherit;

  position: absolute;

  left: 0;

  right: 0;

  top: 0;

  bottom: 0;

  content: attr(data-cont);

  color: #fff;

}

section.p2 a:before {

  -webkit-clip-path: polygon(0 0, 0 100%, 12.5% 100%, 12.5% 0, 25% 0, 25% 100%, 37.5% 100%, 37.5% 0, 50% 0, 50% 100%, 62.5% 100%, 62.5% 0, 75% 0, 75% 100%, 87.5% 100%, 87.5% 0);

  clip-path: polygon(0 0, 0 100%, 12.5% 100%, 12.5% 0, 25% 0, 25% 100%, 37.5% 100%, 37.5% 0, 50% 0, 50% 100%, 62.5% 100%, 62.5% 0, 75% 0, 75% 100%, 87.5% 100%, 87.5% 0);

}

section.p2 a:after {

  -webkit-clip-path: polygon(12.5% 0, 12.5% 100%, 25% 100%, 25% 0, 37.5% 0, 37.5% 100%, 50% 100%, 50% 0, 62.5% 0, 62.5% 100%, 75% 100%, 75% 0, 87.5% 0, 87.5% 100%, 100% 100%, 100% 0);

  clip-path: polygon(12.5% 0, 12.5% 100%, 25% 100%, 25% 0, 37.5% 0, 37.5% 100%, 50% 100%, 50% 0, 62.5% 0, 62.5% 100%, 75% 100%, 75% 0, 87.5% 0, 87.5% 100%, 100% 100%, 100% 0);

}

section.p2 a:hover {

  color: #fff;

}

section.p2 a:hover:before {

  -webkit-transform: translate(0, -100%);

  -moz-transform: translate(0, -100%);

  -ms-transform: translate(0, -100%);

  -o-transform: translate(0, -100%);

  transform: translate(0, -100%);

  color: transparent;

}

section.p2 a:hover:after {

  -webkit-transform: translate(0, 100%);

  -moz-transform: translate(0, 100%);

  -ms-transform: translate(0, 100%);

  -o-transform: translate(0, 100%);

  transform: translate(0, 100%);

  color: transparent;

}