JSFiddle - React, Tailwind, and code Playground

HTML

<article class="block" data-bg="http://www.petcatandkitten.com/wp-content/gallery/kittens-2011/kitten-jumping-in-a-field.jpg" data-height="300">
    <p>blah blah</p>
    </article>

CSS

article {border: 1px solid #aaa; padding: 1em; background-size: cover;}

JavaScript

// Here's my function, it runs this for every block on the page and there's 12 on this project. Each one has it's own BG image based on the data-bg attribute within the HTML and is shown *on hover*.
$(function(){
    $('.block').hover(function() {
        var self = $(this);
        self.css('backgroundImage', 'url(' + self.data('bg') + ')');
        self.data('original-height', self.height());
        self.animate({
            'height': self.data('height') + 'px'
        });
        
    }, function() {
        var self = $(this);
        self.animate({
            'height': $(this).data('original-height')
        }, function(){
            self.css('backgroundImage', '');
        });
        
    });
});