JSFiddle - React, Tailwind, and code Playground

HTML

<body class="bg">
  <div class="block">
    <img src="http://обои-липецк.рф/d/823341/t/v116/images/fixed.jpg" alt="">
    текст
  </div>
  <div class="block">
    <img src="http://www.sunhome.ru/UsersGallery/wallpapers/263/oboi_s_kartoi_mira.jpg" alt="">
    текст
  </div>
  <div class="block">
    <img src="http://www.1366x768.ru/ship/30/30-oboi-korabli-1366x768.jpg" alt="">
    текст
  </div>
</body>

CSS

.bg {
  padding: 10px;
  position: relative;
  background-image: url(http://wallpapers-images.ru/1920x1080/nature/wallpapers/wallpapers-nature-1.jpg);
  background-repeat: no-repeat;
  background-position: 0 0;
}

.block {
  display: inline-block;
  vertical-align: top;
  margin: 0 20px;
  width: 128px;
  height: 128px;
  background-color: #fff;
  overflow: hidden;
  border: 3px solid  #fff;
  position: relative;
}

.block img {
  position: absolute;
  opacity: 0;
}

JavaScript

$(".block").hover(function(){
	var bg = "url(" + $(this).find("img").attr("src") + ")";
  $(".bg").css("background-image", bg);
},function(){
	$(".bg").css("background-image", "");
});