CodePen

HTML

            
              <div class="slider">
    <a>
      <img src="http://images.nationalgeographic.com/wpf/media-live/photos/000/007/cache/seahorse_704_600x450.jpg" />
      </a>
  
    <a>
      <img src="http://theseahorseshop.com/wp-content/uploads/2009/06/seahorse-toy.jpg"/>
    </a>
  
    <a><img src="http://news.nationalgeographic.com/news/2009/02/photogalleries/new-seahorse-sea-life-found/images/primary/090104-05-pygmy-seahorse-pictures_big.jpg" /></a>
</div>
            
          
!

↑ Insert the most common viewport meta tag

CSS

            
              .slider{
      overflow: hidden;
      position: relative;
      height: 22em;
      z-index:0;
      max-width: 44em;}

.slider a {float: left;
  text-decoration: none;
  display:inline;
  height:1px;}

.slider a:hover>*{left:0;opacity:1;transition:left 0s 0s;z-index:2;}

  .slider a:after{
      color:#aaa;
      content:'\25CF';
      display:block;
      font-size:1.5em;
      padding:.5em;
      position: relative;
      z-index:5;}
.slider a:hover:after{content:'\25CB';}

.slider a>*{
  z-index:-1;
  position: absolute;
  left:100%;
  height:auto;
  width:100%;
  opacity:0;
  -webkit-transition: opacity 1s ease, left 0 1s;
  -moz-transition: opacity 1s ease;
  -o-transition: opacity 1s ease;
  -ms-transition: opacity 1s ease;
  transition: opacity 1s ease, left 0 1s;}
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................