JSFiddle - React, Tailwind, and code Playground

HTML

<img src="https://41.media.tumblr.com/2596fe71ee914159f8a663a77d6be796/tumblr_nduverToDN1rcf4rko1_500.jpg" data-bg-url="https://41.media.tumblr.com/2596fe71ee914159f8a663a77d6be796/tumblr_nduverToDN1rcf4rko1_500.jpg" />
<img src="https://40.media.tumblr.com/a1d2b1b50853b99663b22098f227d8ff/tumblr_nvhs2c8yp21trtn8io1_540.jpg" data-bg-url="https://40.media.tumblr.com/a1d2b1b50853b99663b22098f227d8ff/tumblr_nvhs2c8yp21trtn8io1_540.jpg" />
<img src="https://40.media.tumblr.com/0b22b5c5a9a90fc62ae8f511ce869301/tumblr_n4m5hbhGvQ1r4ueyro1_500.jpg" data-bg-url="https://40.media.tumblr.com/0b22b5c5a9a90fc62ae8f511ce869301/tumblr_n4m5hbhGvQ1r4ueyro1_500.jpg" />
<img src="https://36.media.tumblr.com/1c0522c295008b406177c2ee609e6e5e/tumblr_n4m8tazsmH1r4ueyro1_500.jpg" data-bg-url="https://36.media.tumblr.com/1c0522c295008b406177c2ee609e6e5e/tumblr_n4m8tazsmH1r4ueyro1_500.jpg" />

CSS

* {
    padding: 0px;
    margin:0px;
}
body {
    -moz-transition: all 0.25s ease-out;
    -o-transition: all 0.25s ease-out;
    transition: all 0.25s ease-out;
    background-color: #F5F5F5;
    background-size: cover;
}
img {
    position:relative;
    display:block;
    max-width:200px;
    border:2px solid #ffffff;
    margin:4px;
    float:left;
}

JavaScript

/***
  @author Adam Azad @adamzazad
  @email: hi[at]adama.io
  Image to background uing CSS3 and jQuery
 ***/


$(function () {

    $('img[data-bg-url]').hover(function () {

        $('body').css('background-image', 'url(' + $(this).attr('data-bg-url') + ')');
    });

});