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

*, *::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 6 (different line position) */

.tilter--6,

.tilter--6:hover,

.tilter--6:focus {

color:#2e27ad;

}

.tilter--6 .tilter__deco--overlay {

background-image:linear-gradient(45deg,rgba(46,39,173,0.2),rgba(255,186,59,0.58));

}

.tilter--6 .tilter__deco--lines {

stroke:#2e27ad;

stroke-width:6px;

top:-50px;

left:-50px;

}

.tilter--6 .tilter__caption {

padding:04em5.5em1em;

}

.tilter--6 .tilter__figure::before {

box-shadow:none;

}