JSFiddle - React, Tailwind, and code Playground

by luka kupunia

HTML

<div class="ragaca">
  

<div class="cont">

  <div class="col">
  
    <div class="img" style="background-image:url(http://picsum.photos/600/200)">
      <img src="http://gogc.loc/uploads/media/5be300f551e32.jpg">
    </div>
  </div>
  <div class="col">
  
    <div class="img" style="background-image:url(http://picsum.photos/600/200)">
      <img src="http://gogc.loc/uploads/media/5be300f551e32.jpg">
    </div>
  </div>
  <div class="col">
  
    <div class="img" style="background-image:url(http://picsum.photos/600/200)">
      <img src="http://gogc.loc/uploads/media/5be300f551e32.jpg">
    </div>
  </div>
  <div class="col">
  
    <div class="img" style="background-image:url(http://picsum.photos/600/200)">
      <img src="http://gogc.loc/uploads/media/5be300f551e32.jpg">
    </div>
  </div>
  <div class="col">
  
    <div class="img" style="background-image:url(http://picsum.photos/600/200)">
      <img src="http://gogc.loc/uploads/media/5be300f551e32.jpg">
    </div>
  </div>
  <div class="col">
  
    <div class="img" style="background-image:url(http://picsum.photos/600/200)">
      <img src="http://gogc.loc/uploads/media/5be300f551e32.jpg">
    </div>
  </div>
</div>

<div class="cont">

  <div class="col">
  
    <div class="img" style="background-image:url(http://picsum.photos/600/200)">
      <img src="http://gogc.loc/uploads/media/5be300f551e32.jpg">
    </div>
  </div>
  <div class="col">
  
    <div class="img" style="background-image:url(http://picsum.photos/600/200)">
      <img src="http://gogc.loc/uploads/media/5be300f551e32.jpg">
    </div>
  </div>
  <div class="col">
  
    <div class="img" style="background-image:url(http://picsum.photos/600/200)">
      <img src="http://gogc.loc/uploads/media/5be300f551e32.jpg">
    </div>
  </div>
  <div class="col">
  
    <div class="img" style="background-image:url(http://picsum.photos/600/200)">
      <img src="http://gogc.loc/uploads/media/5be300f551e32.jpg">
    </div>
  </div>
  <div class="col">
  
 ...

CSS

body{
  margin:0;
  padding:0;
}
.ragaca{
  background-image:url(http://picsum.photos/600/200);
  background-size:cover;
  background-position:center;
  height:100vh;
  background-attachment:fixed;
  background-repeat:no-repeat;
}
.cont{

  display:flex;
  justify-content:flex-end;

}

.cont{
}
.col{
  width:400px;
  transition:1s;
  overflow:hidden;
}

*{
  box-sizing:border-box !important;
}

.cont .col:hover .img{
  opacity:0.9;
}


.img{
  background-size:cover;
  background-attachment:fixed;
  background-repeat:no-repeat;
  background-position:center;
  transition:1s;
}

img{
  visibility: hidden;
  width: 100%;
}