JSFiddle - React, Tailwind, and code Playground

by 3rror404

HTML

<div class="container">
            <div id="cf">
                <img class="bottom" src="http://placehold.it/640x360" />
                <img class="top" src="http://placehold.it/640x360" />
            </div><!--
         --><div id="cf">
                <img class="bottom" src="http://placehold.it/640x360" />
                <img class="top" src="http://placehold.it/640x360" />
            </div><!--
         --><div id="cf">
                <img class="bottom" src="http://placehold.it/640x360" />
                <img class="top" src="http://placehold.it/640x360" />
            </div><!--
         --><div id="cf">
                <img class="bottom" src="http://placehold.it/640x360" />
                <img class="top" src="http://placehold.it/640x360" />
            </div>
</div>

CSS

.container {
  width: 90%;
  background: #eee;
  margin: 10px auto;
  position: relative;
  text-align:center;
}

#cf {
  background: green;
  position: relative;
  height: 360px;
  width: 640px;
  display:inline-block;
  margin: 20px;
}

#cf img {
  position:absolute;
  -webkit-transition: opacity 1s ease-in-out;
  -moz-transition: opacity 1s ease-in-out;
  -o-transition: opacity 1s ease-in-out;
  transition: opacity 1s ease-in-out;
}

#cf img.top:hover {
  opacity:0;
}