JSFiddle - React, Tailwind, and code Playground

by phloe

HTML

<ul>
<li><img src="//fillmurray.com/400/200"/></li>
<li><img src="//fillmurray.com/500/250"/></li>
<li><img src="//fillmurray.com/600/300"/></li>
<li><img src="//fillmurray.com/700/350"/></li>
<li><img src="//fillmurray.com/800/400"/></li>
</ul>

CSS

ul {
  padding: 0;
  margin: 0;
  background-color: rgba(0, 255, 0, 0.2);
  position: relative;
}
ul:after {
  content: "";
  display: block;
  clear: both;
}
ul img {
  visibility: hidden;
  display: block; 
  width: 100%;
  height: auto;
}
ul li {
  display: block;
  list-style: none;
  float: left;
  width: 100%;
  margin: 0;
}
ul li + li {
  margin-left: -100%;
}
ul:not(:hover) li:first-child img,
ul li:hover img {
  visibility: visible;
}

ul li:before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 20%;
  _background-color: rgba(255, 0, 0, 0.2);
  z-index: 1;
}
ul li:nth-child(2):before {
  left: 20%;
}
ul li:nth-child(3):before {
  left: 40%;
}
ul li:nth-child(4):before {
  left: 60%;
}
ul li:nth-child(5):before {
  left: 80%;
}