JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<label>
  <input type="radio" name="tab" value=""> 0</label>
<label>
  <input type="radio" name="tab" value="one"> 1</label>
<label>
  <input type="radio" name="tab" value="two"> 2</label>
<div style="width:100%; height:100%;">
<div id="img"></div>
</div>

CSS

#img {
  background: url('http://goldwallpapers.com/uploads/posts/wallpaper-for-google/wallpaper_for_google_013.jpg');
  background-repeat: no-repeat;
  background-size: 100%;
  background-position: 0 0;
  width: 620px;
  height: 380px;
  transition: all 1.5s ease-out;
}

#img.one {
  background-size: 200%;
  background-position: -40px -100px;
}

#img.two {
  background-size: 300%;
  background-position: -1430px -800px;
}

JavaScript

$(function() {
  $("[name='tab']").on("change", function() {
	  var newClass = $(this).val();
    $("#img").removeClass();
    $("#img").addClass(newClass);
  });
});