JSFiddle - React, Tailwind, and code Playground

HTML

<a href="link.html" class="item"><img src="http://integrastroi.ru//wp-content/uploads/2018/03/1591679_2-min.jpg" /></a>
<a href="link.html" class="item"><img src="http://dummyimage.com/200x300/ddd/333.png" /></a>
<a href="link.html" class="item"><img src="http://dummyimage.com/200x300/ddd/333.png" /></a>
<a href="link.html" class="item"><img src="http://dummyimage.com/200x300/ddd/333.png" /></a>
<a href="link.html" class="item"><img src="http://dummyimage.com/200x300/ddd/333.png" /></a>
<a href="link.html" class="item"><img src="http://dummyimage.com/200x300/ddd/333.png" /></a>
<a href="link.html" class="item"><img src="http://dummyimage.com/200x300/ddd/333.png" /></a>
<a href="link.html" class="item"><img src="http://dummyimage.com/200x300/ddd/333.png" /></a>

CSS

.item {
    display: block;
    height: 300px;
    width: 200px;
    float: left;
    margin: 0 2px 2px 0;
}

JavaScript

$('.item').each(
    function() {
        var colorbg = $(this).find('img').attr('src').replace("ddd", "7bf");
        $(this).css('background', 'url(' + colorbg + ')');
    }
);

$('.item').hover(
    function() {
        $(this).stop().animate({"opacity": "0"}, 0);
        $(this).find('img').stop().animate({"opacity": "0"}, 0);
        $(this).stop().animate({"opacity": "1"}, 500);
    },
    function() {
        $(this).find('img').stop().animate({"opacity": "1"}, 0);
    }
);