stacked list images

by kkdaily

HTML

<h3>Hover to reveal photo underneath</h3>
 
 <ul class="north-showcase">
    <li>
        <div class="img-wrapper">
          <figure class="before">
              <img src="http://placekitten.com/300/300">
          </figure>
          <figure class="after">
              <img src="http://placekitten.com/g/300/300">
          </figure>
        </div>
    
    <li>
      <div class="img-wrapper">
        <figure class="before">
            <img src="http://placekitten.com/300/300">
        </figure>
        <figure class="after">
            <img src="http://placekitten.com/g/300/300">
        </figure>
        </div>

     <li>
      <div class="img-wrapper">
        <figure class="before">
            <img src="http://placekitten.com/300/300">
        </figure>
        <figure class="after">
            <img src="http://placekitten.com/g/300/300">
        </figure>
        </div>
     
      <li>
        <div class="img-wrapper">
          <figure class="before">
            <img src="http://placekitten.com/300/300">
          </figure>
          <figure class="after">
            <img src="http://placekitten.com/g/300/300">
          </figure>
        </div>
      
    </ul>

CSS

h3 {
  text-align: center
}
ul {
  padding-left: 0;
}

.north-showcase {
list-style: none;
width: 100%;
}

.before {
width: 100%;
margin: 0%;
z-index: 1;
}

.before img {
width: 100%;
height: auto;
}

.after {
width: 100%;
margin: 0%;
z-index: 2;
}

.after img {
width: 100%;
height: auto;
}

.img-wrapper {
  position: relative;
}
.after, .before {
  position: absolute;
}
.after:hover {
  opacity: 0;
}
.north-showcase li {
  display: inline-block;
  width: 25%;
}