JSFiddle - React, Tailwind, and code Playground

HTML

<img src="http://acwongblog.qiniudn.com/2015-03_example-picture.jpg" id="img1">
<img src="http://acwongblog.qiniudn.com/2015-03_example-picture.jpg" id="img2">
<img src="http://acwongblog.qiniudn.com/2015-03_example-picture.jpg" id="img3">
<div class="pic">
    <img src="http://acwongblog.qiniudn.com/2015-03_example-picture.jpg" id="img4">
    <div class="info">Hello</div>
</div>

CSS

img {transition: all 3s;}
#img1:hover {transform: translateX(20px)}
#img2:hover {transform: scale(1.2,1.2)}
#img3:hover {transform: rotate(360deg)}

.pic {
    position:relative;
    width:256px;
    height:256px;
    transform-style: preserve-3d;
    transition: transform 1s;
}
.pic:hover {
    transform: translateZ(-128px) rotateX(90deg);
}
.pic img {
    transform: translateZ(128px);
    transition: all 1s;
}
.info {
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background-color:black;
    transform: rotateX(-90deg) translateZ(128px);
    transition: all 1s;
    color: white;
}