JSFiddle - React, Tailwind, and code Playground

by kazabr

HTML

<ul class="gallery">
    <li><a href="#"><img src="http://luxfon.com/pic/201205/800x600/luxfon.com-12564.jpg" alt="" /></a></li>
    <li><a href="#"><img src="http://rewalls.com/pic/201108/800x600/reWalls.com-42452.jpg" alt="" /></a></li>
    <li><a href="#"><img src="http://rewalls.com/pic/201206/800x600/reWalls.com-67907.jpg" alt="" /></a></li>
</ul>

CSS

body {
    background: #eee;
    padding: 20px;
}
.gallery li {
    float: left;
    margin: 0 10px;
    padding: 10px;
    border: 1px solid #ddd;
    list-style: none;
}
.gallery img {
    float: left;
    width: 200px;
    -webkit-transition: -webkit-transform 0.2s ease-in-out;
    -moz-transition: -moz-transform 0.2s ease-in-out;
    transition: transform 0.2s ease-in-out;
}
.gallery a:hover img {
    -webkit-transform: scale(1.5) rotate(-10deg);
    -moz-transform: scale(1.5) rotate(-10deg);
    -o-transform: scale(1.5) rotate(-10deg);
    transform: scale(1.5) rotate(-10deg);
    -webkit-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.5);
    -moz-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.5);
    box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.5);
}
/* трансформация относительно левого нижнего угла
.gallery a:hover img {
    -webkit-transform-origin: bottom left;
    -moz-transform-origin: bottom left;
    -o-transform-origin: bottom left;
    transform-origin: bottom left;
    -webkit-transform: scale(1.5);
    -moz-transform: scale(1.5);
    -o-transform: scale(1.5);
    transform: scale(1.5);
}
*/