استایل زیبا با 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;

}

سون لرن • آموزش...