استایل زیبا با scss برای هاور - Stunning Hover Effects (نمونه 1)

@import url(http://fonts.googleapis.com/css?family=Martel+Sans:200,300,400,800,900);

*,

*:before,

*:after {

-webkit-box-sizing: border-box;

-moz-box-sizing: border-box;

box-sizing: border-box;

}

body {

font-family: sans-serif;

background-color: #000;

}

section {

height: 350px;

width: 94%;

box-shadow: 0px 0px 146px 21px rgba(0, 0, 0, 0.75);

background-color: #000;

background-repeat: no-repeat;

background-size: cover;

background-position: center center;

position: relative;

overflow: hidden;

width: 100%;

margin: 0 auto 0px;

}

section a {

text-transform: uppercase;

text-align: center;

text-decoration: none;

font-size: 4.875em;

font-weight: 900;

color: #fff;

}

section a:after, section a:before {

content: '';

}

section.head {

background-color: #fff;

position: relative;

z-index: 10;

}

section.head a {

width: 652px;

height: 78px;

line-height: 78px;

position: absolute;

top: 50%;

left: 50%;

margin-left: -326px;

margin-top: -39px;

font-weight: 200;

color: #BABABA;

-webkit-transition: all 2s cubic-bezier(0.21, 1, 0.84, 1.01);

-moz-transition: all 2s cubic-bezier(0.21, 1, 0.84, 1.01);

transition: all 2s cubic-bezier(0.21, 1, 0.84, 1.01);

}

section.head a:before, section.head a:after {

color: #000;

font-weight: 900;

font-size: 30px;

text-transform: none;

display: block;

-webkit-transition: inherit;

-moz-transition: inherit;

transition: inherit;

}

section.head a:before {

content: attr(data-bf);

position: absolute;

top: -45px;

left: -5px;

}

section.head a:after {

content: attr(data-af);

position: absolute;

right: 0;

bottom: -30px;

}

section.head a:hover {

-webkit-transform: scale(1.05);

-moz-transform: scale(1.05);

-ms-transform: scale(1.05);

-o-transform: scale(1.05);

transform: scale(1.05);

}

section.head a:hover:before {

-webkit-transform: scale(1.2) translate(-25px, -15px);

-moz-transform: scale(1.2) translate(-25px, -15px);

-ms-transform: scale(1.2) translate(-25px, -15px);

-o-transform: scale(1.2) translate(-25px, -15px);

transform: scale(1.2) translate(-25px, -15px);

}

section.head a:hover:after {

-webkit-transform: scale(1.2) translate(25px, 15px);

-moz-transform: scale(1.2) translate(25px, 15px);

-ms-transform: scale(1.2) translate(25px, 15px);

-o-transform: scale(1.2) translate(25px, 15px);

transform: scale(1.2) translate(25px, 15px);

}

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