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

}