JSFiddle - React, Tailwind, and code Playground

by Kocsten

HTML

<div class="liftup"><img src="http://www.dynamicdrive.com/cssexamples/media/coconut.jpg" ></div> 
<div class="liftup"><img src="http://www.dynamicdrive.com/cssexamples/media/ocean.jpg" ></div> 
<div class="liftup"><img src="http://www.dynamicdrive.com/cssexamples/media/horses.jpg" ></div> 
<div class="liftup"><img src="http://www.dynamicdrive.com/cssexamples/media/angelinasmall.jpg" ></div>

CSS

div.liftup{
    padding: 5px;
    position: relative;
	width: 200px;
	height: 150px;
	overflow: hidden;
    border: 1px solid black;
    background: black;
    color: white;
    box-shadow: 0 0 0 gray;
    -moz-transition: all 0.3s;
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
    float: left;
    margin-right: 10px;
    margin-bottom: 10px;
}

div.liftup:hover{
    -moz-transition: all 0.3s;
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
    -moz-transform: rotateX(20deg);
    -webkit-transform: rotateX(20deg);
    transform: rotateX(20deg);
    -moz-transform-origin: 50% 0;
    -webkit-transform-origin: 50% 0;
    transform-origin: 50% 0;
    box-shadow: 0 20px 20px -5px gray;
}

div.liftup img{
		width: 200px;
		height: 150px;
}