JSFiddle - React, Tailwind, and code Playground

by tjerabek

HTML

<div class="img">
<img src="http://farm8.staticflickr.com/7199/6916317964_b79d7f8b41_c.jpg" width="184" height="122" />
</div>
<div class="img">
<img src="http://farm8.staticflickr.com/7100/6916317736_fcf6af035a_b.jpg" width="184" height="122" />
</div>
<p><a href="#" class="remove-all">Remove all</a></p>

CSS

body{
    padding: 5em;
    font-family: Arial;
}
p{
    clear: both;
}
img{
    display: block;
}
.img{
    animation: showimage 300ms ease-in-out;
    -webkit-animation: showimage 300ms ease-in-out;
    display: block;
    -webkit-transition: all 300ms ease-in-out;
    -moz-transition: all 300ms ease-in-out;
    -ms-transition: all 300ms ease-in-out;
    -o-transition: all 300ms ease-in-out;
    transition: all 300ms ease-in-out;
    opacity: 1;
    cursor: pointer;
    float: left;
    margin-right: 1em;
    position: relative;
}
.img:before{
    content:'';
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #000;
    opacity: 0;
}
.img:hover:before,
.img.marked:before{
    opacity: .3;
}
.removed{
    -webkit-transform: scale(0.3);
    -moz-transform: scale(0.3);
    -ms-transform: scale(0.3);
    -o-transform: scale(0.3);
    transform: scale(0.3);
    opacity: 0;
}

@keyframes showimage
{
from {
    -webkit-transform: scale(0.5);
    -moz-transform: scale(0.5);
    -ms-transform: scale(0.5);
    -o-transform: scale(0.5);
    transform: scale(0.5);
}
to {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
}
}

@-moz-keyframes showimage /* Firefox */
{
from {
    -webkit-transform: scale(0.5);
    -moz-transform: scale(0.5);
    -ms-transform: scale(0.5);
    -o-transform: scale(0.5);
    transform: scale(0.5);
}
to {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
}
}

@-webkit-keyframes showimage /* Safari and Chrome */
{
from {
    -webkit-transform: scale(0.5);
    -moz-transform: scale(0.5);
    -ms-transform: scale(0.5);
    -o-transform: scale(0.5);
    transform: scale(0.5);
}
to {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
  ...

JavaScript

$('body').on('click', '.img', function() {
    removeImage($(this));
});

$('body').on('click', '.remove-all', function() {
    removeImage($('.img'));
    return false;
});

function removeImage(img) {
    img.addClass('removed').delay(300).queue(function() {
        $(this).remove();
    });
}