JSFiddle - React, Tailwind, and code Playground

by shekyb

HTML

<div class="wrapper">
    <div class="item">
        <img src="http://gallery.photo.net/photo/5928785-md.jpg" />
    </div>
    <div class="item">
        <img src="http://gallery.photo.net/photo/5601491-md.jpg" />
    </div>
    <div class="item">
        <img src="http://gallery.photo.net/photo/5129328-lg.jpg" />
    </div>
</div>

CSS

.item {
    width: 250px;
    overflow: hidden;
    float: left;
    margin-left: 20px;
    display: inline-block;
    height: 150px;
}
.item img {
    filter: grayscale();
    -webkit-filter: grayscale();
    -moz-filter: grayscale();
    -ms-filter: grayscale();
    transition: all 0.5s;
    -moz-transition: all 0.5s;
    -webkit-transition: all 0.5s;
    -ms-transition: all 0.5s;
    position: relative;
    width: 300px;
    margin-top: -50px;
    margin-left: -50px;
    height: auto;
}
.item:hover img {
    width: 100%;
    height: auto;
    filter: none;
    -webkit-filter:none;
    -moz-filter: none;
    -ms-filter: none;
    margin: 0;
    animation: none;
        -webkit-animation: none;
}

.rotateDiag {
    animation:rotateDiag 10s linear infinite;
    -webkit-animation:rotateDiag 10s linear infinite;
}

.rotateHor {
    animation:rotateHor 10s linear infinite;
    -webkit-animation:rotateHor 10s linear infinite;
}

.rotateVer {
    animation:rotateVer 10s linear infinite;
    -webkit-animation:rotateVer 10s linear infinite;
}

@keyframes rotateDiag {
    0% {transform: translate(0px, 0px);}
    50% {transform: translate(10px, 10px);}
    100% {transform: translate( 0px, 0px);}
}
@-webkit-keyframes rotateDiag {
     0% {-webkit-transform: translate(0px, 0px);}
    50% {-webkit-transform: translate(10px, 10px);}
    100% {-webkit-transform: translate( 0px, 0px);}
}
@keyframes rotateHor {
    0% {transform: translate(0px, 0px);}
    50% {transform: translate(0px, 10px);}
    100% {transform: translate( 0px, 0px);}
}
@-webkit-keyframes rotateHor {
     0% {-webkit-transform: translate(0px, 0px);}
    50% {-webkit-transform: translate(0px, 10px);}
    100% {-webkit-transform: translate( 0px, 0px);}
}

@keyframes rotateVer {
    0% {transform: translate(0px, 0px);}
    50% {transform: translate(10px, 0px);}
    100% {transform: translate( 0px, 0px);}
}
@-webkit-keyframes rotateVer {
     0% {-webkit-transform: translate(0px, 0px);}
    50% {-webkit-transform:...

JavaScript

$images = $('.item img');
$classes = ['rotateVer', 'rotateHor', 'rotateDiag'];
$images.each(function() {
    $(this).addClass($classes[Math.floor(Math.random()*$classes.length)]);
});