JSFiddle - React, Tailwind, and code Playground

by Van Hai Le

HTML

<div class="slider" >
  <img class="active" src="https://images.unsplash.com/photo-1541690853893-d8a69712cbbb?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1000&h=500&fit=crop&ixid=eyJhcHBfaWQiOjF9&s=1ccf6a6e064402b743f2bc9c8bdb25f0" alt="">
  <img  src="https://images.unsplash.com/photo-1540200882611-31297ad57e00?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1000&h=500&fit=crop&ixid=eyJhcHBfaWQiOjF9&s=f6e4d72f0fa75366af5d2fc478fc93b5" alt="">
</div>

CSS

.slider {
  height: 300px;
  width: 500px;
  background: skyblue;
  margin: auto;
}

img {
  height: 100%;
  width: 100%;
  display: none;
  transition: all .5s ease;
}
img:hover {
  opacity: 0;
}
.active {
  display: block;
}