JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery-2.2.4.js"></script>
<div id="imageSliderOuterContainer">
      <div id="imageContainer">
          <img src="https://s3-us-west-2.amazonaws.com/cbsapp/package_content/s78c_e4vt6/main_images/pg_4.jpg" /> 
      </div>
      <div id="controlsContainer">
       
      </div>

  </div>

CSS

body,html{
  width:100%;
  height:100%
}
div#imageSliderOuterContainer{
    width: 100%;
    height: 100%;
    overflow: hidden;
    display: flex;
    background:red;
    flex-direction: column;
}
img{
  width:100%;
}
div#imageContainer{
    flex:1;
    flex-shrink: 0;
    background: #fff;
    overflow: auto;
}
    div#controlsContainer{
        height: 50px;
        width: 100%;
        background: rgba(255,205,210,.8);
        display: flex;
    }

JavaScript

$(document).ready(function(e){
	alert('me')
  
  setTimeout(function(){
  	$('img').css({
      '-webkit-transform-origin':'0 0',
    	'-webkit-transform':'scale(1.8)'
    })
  },1000)
})