افکت زیبا کج شدن برای تصاویر - Tilt Hover Effects ( نمونه آخر)

ساخت وبلاگ

*, *::after, *::before {-webkit-box-sizing:border-box;box-sizing:border-box;}

.tilter {

display:block;

position:relative;

width:300px;

height:415px;

margin:3emauto;

color:#fff;

perspective:1000px;

}

.tilter * {

pointer-events:none;

}

.tilter:hover,

.tilter:focus {

color:#fff;

outline:none;

}

/*

.tilter__figure,

.tilter__deco,

.tilter__caption {

will-change: transform;

}*/

.tilter__figure,

.tilter__image {

margin:0;

width:100%;

height:100%;

display:block;

}

.tilter__figure > * {

transform:translateZ(0px);/* Force correct stacking order */

}

.smooth .tilter__figure,

.smooth .tilter__deco--overlay,

.smooth .tilter__deco--lines,

.smooth .tilter__deco--shine div,

.smooth .tilter__caption {

transition:transform0.2sease-out;

}

.tilter__figure {

position:relative;

}

.tilter__figure::before {

content:'';

position:absolute;

width:90%;

height:90%;

top:5%;

left:5%;

box-shadow:030px20pxrgba(35,32,39,0.5);

}

.tilter__deco {

position:absolute;

top:0;

left:0;

width:100%;

height:100%;

overflow:hidden;

}

.tilter__deco--overlay {

background-image:linear-gradient(45deg,rgba(226,60,99,0.4),rgba(145,58,252,0.4),rgba(16,11,192,0.4));

}

.tilter__deco--shine div {

position:absolute;

width:200%;

height:200%;

top:-50%;

left:-50%;

background-image:linear-gradient(45deg,rgba(0,0,0,0.5)0%,rgba(255,255,255,0.25)50%,transparent100%);

}

.tilter__deco--lines {

fill:none;

stroke:#fff;

stroke-width:1.5px;

}

.tilter__caption {

position:absolute;

bottom:0;

width:100%;

padding:4em;

}

.tilter__title {

margin:0;

font-weight:normal;

font-size:2.5em;

font-family:'Abril Fatface',serif;

line-height:1;

}

.tilter__description {

margin:1em000;

font-size:0.85em;

letter-spacing:0.15em;

}

/* Individual styles */

/* Example 8 (different line) */

.tilter--8 {

perspective:none;

}

.tilter--8 .tilter__figure {

transform-style:flat;

}

.tilter--8 .tilter__deco--lines {

stroke:#9255ae;

stroke-width:6px;

mix-blend-mode:color-burn;

}

.tilter--8 .tilter__caption {

color:#9255ae;

mix-blend-mode:color-burn;

}

.tilter--8 .tilter__figure::before {

box-shadow:none;

}

سون لرن • آموزش...
ما را در سایت سون لرن • آموزش دنبال می کنید

برچسب : نویسنده : استخدام کار 7learn بازدید : 259 تاريخ : سه شنبه 1 فروردين 1396 ساعت: 6:23

خبرنامه