JSFiddle - React, Tailwind, and code Playground

by luka kupunia

HTML

<div class="box">
  <img src="http://picsum.photos/1920/700" alt="">
</div>
<div class="box1">
  <img src="http://picsum.photos/1920/700" alt="">
</div>

CSS

body {
  margin: 0;
  background: black;
}
div.box {
  width: 100%;
  padding-top: 50%;
  position: relative;
}
div.box img {
  width: 100vw;
  height: auto;
  position: absolute;
  left:0;
  top:0;
  opacity: 0.3;
}
div.box1 {
  width: 30%;
  padding-top: 30%;
  position: absolute;
  top: 100px;
  overflow: hidden;
  right: 20%;
  top: 10%;
  margin-left: 100px;
  /* border: 4px solid black; */
}
div.box1 img {
  position: absolute;
  width: 100vw;
}

JavaScript

function detect() {
  /* var a = $('.box').width() */;
  var b = $('.box img').height();
  var c = $('.box1').offset().top;
  var d = $('.box1').offset().left;
  $('.box1 img').css({ height: b , top: '-' + c + 'px' , left: '-' + d + 'px'})
}
detect();

$(window).resize(function(){
  detect();
})