JSFiddle - React, Tailwind, and code Playground

by luka kupunia

HTML

<div class="row">
  <div class="box">
    <div class="img" style="background: url(http://picsum.photos/1200/900) no-repeat;background-size:cover; background-position: center;"></div>
  </div>
  <div class="box">
    <div class="img" style="background: url(http://picsum.photos/1200/900) no-repeat;background-size:cover; background-position: center;"></div>
  </div>
</div>

CSS

body {
  margin: 0;
}
* {
  box-sizing: border-box;
}
div.row {
  width: 100%;
  position:relative;
  padding-top: 30%;
}
div.row:after {
  content: '';
  display: table;
  clear:both;
}
div.box {
  width: 50%;
  height: 100%;
  float: left;
  border: 10px solid red;
  position: absolute;
  top: 0;
  backface-visibility: hidden;
  left: 0;
  overflow:hidden;
  transition: 1s;
}
div.box:nth-child(2){
    right: 0;
    left: unset;
}
div.img {
    width: 130%;
    height: 100%;
    position:absolute;
    top: 0;
}
div.box:nth-child(1) div.img {
    left: 0;
}
div.box:nth-child(2) div.img {
    right: 0;
}

JavaScript

$('.box').hover(function(){
	$('.box').css({ width : '45%' })
    $(this).css({ width: '55%' })
},function(){
	$('.box').css({ width: '50%' })
})