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

*,

*: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.p7 {

background-image: url(8.jpg);

}

section.p7 a {

width: 307px;

height: 94px;

line-height: 94px;

position: absolute;

top: 50%;

left: 50%;

margin-left: -153.5px;

margin-top: -47px;

-webkit-transition: all 0.2s;

-moz-transition: all 0.2s;

-ms-transition: all 0.2s;

-o-transition: all 0.2s;

transition: all 0.2s;

}

section.p7 a:before,

section.p7 a:after {

content: '';

-webkit-border-radius: 50%;

-moz-border-radius: 50%;

border-radius: 50%;

width: 250px;

height: 250px;

position: absolute;

top: 50%;

left: 50%;

margin-left: -125px;

margin-top: -125px;

}

section.p7 a:before {

-webkit-box-shadow: inset 0px 0px 0px 6px #ffffff;

-moz-box-shadow: inset 0px 0px 0px 6px #ffffff;

box-shadow: inset 0px 0px 0px 6px #ffffff;

-webkit-clip-path: polygon(0 0, 0 80px, 0% 80px, 0% 0);

clip-path: polygon(0 0, 0 80px, 0% 80px, 0% 0);

-webkit-transition: all 0.4s 0.25s;

-moz-transition: all 0.4s 0.25s;

-ms-transition: all 0.4s 0.25s;

-o-transition: all 0.4s 0.25s;

transition: all 0.4s 0.25s;

}

section.p7 a:after {

background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAPoAAAD6CAYAAACI7Fo9AAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEgAACxIB0t1+/AAAABZ0RVh0Q3JlYXRpb24gVGltZQAwNC8wMy8xNZFWqVMAAAAcdEVYdFNvZnR3YXJlAEFkb2JlIEZpcmV3b3JrcyBDUzbovLKMAAAC/UlEQVR4nO3TuRGAMADAsIT9dw4lDJDjOUsTuPFca61xmeObNO6hcY8/NI5x6zzerACeYXQIMDoEGB0CjA4BRocAo0OA0SHA6BBgdAgwOgQYHQKMDgFGhwCjQ4DRIcDoEGB0CDA6BBgdAowOAUaHAKNDgNEhwOgQYHQIMDoEGB0CjA4BRocAo0OA0SHA6BBgdAgwOgQYHQKMDgFGhwCjQ4DRIcDoEGB0CDA6BBgdAowOAUaHAKNDgNEhwOgQYHQIMDoEGB0CjA4BRocAo0OA0SHA6BBgdAgwOgQYHQKMDgFGhwCjQ4DRIcDoEGB0CDA6BBgdAowOAUaHAKNDgNEhwOgQYHQIMDoEGB0CjA4BRocAo0OA0SHA6BBgdAgwOgQYHQKMDgFGhwCjQ4DRIcDoEGB0CDA6BBgdAowOAUaHAKNDgNEhwOgQYHQIMDoEGB0CjA4BRocAo0OA0SHA6BBgdAgwOgQYHQKMDgFGhwCjQ4DRIcDoEGB0CDA6BBgdAowOAUaHAKNDgNEhwOgQYHQIMDoEGB0CjA4BRocAo0OA0SHA6BBgdAgwOgQYHQKMDgFGhwCjQ4DRIcDoEGB0CDA6BBgdAowOAUaHAKNDgNEhwOgQYHQIMDoEGB0CjA4BRocAo0OA0SHA6BBgdAgwOgQYHQKMDgFGhwCjQ4DRIcDoEGB0CDA6BBgdAowOAUaHAKNDgNEhwOgQYHQIMDoEGB0CjA4BRocAo0OA0SHA6BBgdAgwOgQYHQKMDgFGhwCjQ4DRIcDoEGB0CDA6BBgdAowOAUaHAKNDgNEhwOgQYHQIMDoEGB0CjA4BRocAo0OA0SHA6BBgdAgwOgQYHQKMDgFGhwCjQ4DRIcDoEGB0CDA6BBgdAowOAUaHAKNDgNEhwOgQYHQIMDoEGB0CjA4BRocAo0OA0SHA6BBgdAgwOgQYHQKMDgFGhwCjQ4DRIcDoEGB0CDA6BBgdAowOAUaHAKNDgNEhwOgQYHQIMDoEGB0CjA4BRocAo0OA0SHA6BBwAm0hC/AwOVFDAAAAAElFTkSuQmCC');

background-size: cover;

background-position: center center;

-webkit-clip-path: polygon(0 0, 0 0px, 100% 0px, 100% 0);

clip-path: polygon(0 0, 0 0px, 100% 0px, 100% 0);

-webkit-transition: all 0.2s;

-moz-transition: all 0.2s;

-ms-transition: all 0.2s;

-o-transition: all 0.2s;

transition: all 0.2s;

}

section.p7 a:hover:before {

-webkit-clip-path: polygon(0 0, 0 80px, 100% 80px, 100% 0);

clip-path: polygon(0 0, 0 80px, 100% 80px, 100% 0);

-webkit-transition: all 0.3s;

-moz-transition: all 0.3s;

-ms-transition: all 0.3s;

-o-transition: all 0.3s;

transition: all 0.3s;

}

section.p7 a:hover:after {

-webkit-clip-path: polygon(0 0, 0 80px, 100% 80px, 100% 0);

clip-path: polygon(0 0, 0 80px, 100% 80px, 100% 0);

-webkit-transition: all 0.5s 0.2s;

-moz-transition: all 0.5s 0.2s;

-ms-transition: all 0.5s 0.2s;

-o-transition: all 0.5s 0.2s;

transition: all 0.5s 0.2s;

}

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