JSFiddle - React, Tailwind, and code Playground

by luka kupunia

HTML

<div class="bg" style="background-image: url(https://i2.wp.com/beebom.com/wp-content/uploads/2016/01/Reverse-Image-Search-Engines-Apps-And-Its-Uses-2016.jpg?resize=640%2C426)">

 <div class="item-cont">
   
  <div class="item"  style="background-image: url(https://i2.wp.com/beebom.com/wp-content/uploads/2016/01/Reverse-Image-Search-Engines-Apps-And-Its-Uses-2016.jpg?resize=640%2C426)">
     <img src="https://i2.wp.com/beebom.com/wp-content/uploads/2016/01/Reverse-Image-Search-Engines-Apps-And-Its-Uses-2016.jpg?resize=640%2C426" alt="">
  </div>

 </div>
</div>

CSS

.bg{

  background-size:cover;
  background-position:center;
  background-repeat: no-repeat;
  background-attachment: fixed;

}

.item-cont{
  display:flex;
  flex-direction:row;
  justify-content:flex-end;
  background-color: rgba(18, 18, 18,.3);
}

.item{
  margin-right: 100px;
  background-size:cover;
  background-position: center;
  background-repeat: no-repeat;
  width: 500px;
  height: 500px;
  background-attachment: fixed;
  border: 1px solid red;
  transition:1s;
}
.item:hover{
  /* background-position:center; */
}
.item img{
  visibility: hidden;
  width: 100%;
}