JSFiddle - React, Tailwind, and code Playground

HTML

<p class="btn"><a href="#">Hide</a></p>

<div class="box"><img src="http://www.ctgclan.com/wp-content/uploads/2011/11/totally-great.jpg" width="200px"/></div>

<div class="box one"><!--<img src="http://www.ctgclan.com/wp-content/uploads/2011/11/totally-great.jpg" />--></div>

<div class="box two"><!--<img src="http://www.ctgclan.com/wp-content/uploads/2011/11/totally-great.jpg" />--></div>

CSS

.box {
    display: block;
    width:200px;
    height:200px;
    background-color: red;
    position:relative;
    
}

.one {
    background:#9d9;
width:230px;
    height:180px;
margin-left:90px;    
    
}

.two {
  background:#aaf;   
    
}

JavaScript

var hide_those_boxes = function () {
    $('.box , .box img').each(function(ix, obj) {
            $(obj).animate({
                opacity : 0, 
                left: '+='+$(obj).width()/4, 
                top: '+='+$(obj).height()/4,
                height:0, 
                width:0
            }, 
            3000, 
            function() { $(obj).hide(); }
        );
    });
}

    
    
    $(".btn a").click(hide_those_boxes);