استایل زیبا با scss برای هاور - Stuing Hover Effects (نمونه 5) : افکت هلال ماه

@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: 'Martel Sans', 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.p14 {

background-image: url("5.jpg");

}

section.p14 a {

width: 322px;

height: 94px;

line-height: 94px;

position: absolute;

top: 50%;

left: 50%;

margin-left: -161px;

margin-top: -47px;

z-index: 10;

}

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

width: 150px;

height: 150px;

border-radius: 50%;

position: absolute;

display: block;

top: -35%;

right: -10%;

-webkit-transition: all 1s cubic-bezier(0.45, 0.76, 0.58, 0.94);

-moz-transition: all 1s cubic-bezier(0.45, 0.76, 0.58, 0.94);

transition: all 1s cubic-bezier(0.45, 0.76, 0.58, 0.94);

}

section.p14 a:before {

background-color: #011925;

z-index: -1;

}

section.p14 a:after {

background-color: #fff;

z-index: -2;

-webkit-transform: scale(0.9);

-moz-transform: scale(0.9);

-ms-transform: scale(0.9);

-o-transform: scale(0.9);

transform: scale(0.9);

}

section.p14 a:hover:after {

-webkit-transform: scale(1) translate(10px);

-moz-transform: scale(1) translate(10px);

-ms-transform: scale(1) translate(10px);

-o-transform: scale(1) translate(10px);

transform: scale(1) translate(10px);

}