JSFiddle - React, Tailwind, and code Playground

by djmartini

HTML

<script src="https://yandex.st/jquery/1.8.3/jquery.min.js"></script>
<img width="0" height="200" src="http://history-auto.info/images/model/1370/4091389084865_history-auto.info_bmw_m3-e93.jpg">
<div class="xx">
</div>
<div class="x">rgerf
</div>

CSS

.xx {
  background: url('http://history-auto.info/images/model/1370/4091389084865_history-auto.info_bmw_m3-e93.jpg') no-repeat 0 0;
  width: 0;
  height: 200px;
  display: block;
  background-size: 100% 100%;
}
.x {
  background: url('http://history-auto.info/images/model/1370/4091389084865_history-auto.info_bmw_m3-e93.jpg') no-repeat 0 0;
  background-size: 100% 100%;
  width: 0;
  height: 200px;
  display: block;
}
.x:hover {
  overflow:hidden;
    width: 600px;
    -webkit-transition:width 2s ease-in;
    -moz-transition:width 2s ease-in;
    -o-transition:width 2s ease-in;
    transition:width 2s ease-in;
}

JavaScript

$('img').animate({
  'width': '600px'
}, 3000);

$('.xx').animate({
  'width': '600px'
}, 3000);