.image-area .img-wrapper{width:250px;height:250px;position:relative;overflow:hidden}.image-area .img-wrapper:before{content:'';position:absolute;top:0;left:180%;height:100%;width:100%;background:rgba(255,255,255,0.3);z-index:1;transform:skew(45deg);transition:0.5s}.image-area .img-wrapper:hover:before{left:-180%}.image-area .img-wrapper img{height:100%;width:100%;filter:grayscale(10%);transition:2s}.image-area .img-wrapper:hover img{filter:grayscale(0%);transform:scale(1.1)}.image-area .img-wrapper h2{background:tomato;font-family:Poppins,sans-serif;font-size:20px;color:#fff;text-align:center;text-transform:uppercase;margin:0;padding:10px;position:absolute;bottom:20px;width:100%;transform:perspective(400px) rotateY(0deg)}.image-area .img-wrapper h3{background:tomato;font-family:Poppins,sans-serif;font-size:16px;color:#fff;text-align:center;text-transform:uppercase;margin:0;padding:5px 0;position:absolute;bottom:0;width:100%;transform:perspective(400px) rotateY(0deg)}.image-area .img-wrapper ul{position:absolute;top:0;left:0;margin:0;padding:0;list-style:none;z-index:2}.image-area .img-wrapper ul li{background:#333;height:40px;width:40px;text-align:center;line-height:40px;transform:perspective(800px) rotateY(0deg)}.image-area .img-wrapper ul li a{color:tomato;display:block}.image-area .img-wrapper ul li i{color:tomato;transition:0.3s}.image-area .img-wrapper ul li i:hover{color:#fff}