*, *::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