JSFiddle - React, Tailwind, and code Playground

by J. Albert Bowden

HTML

<div id="slideshow">
      <ul>
        <li><a href="#five">Five</a> <div id="five"></div></li>
          <li><a href="#six">Six</a> <div id="six"></div></li>
      </ul>
    </div>

<p><cite><a href="http://designshack.net/articles/css/targetcss/">What’s the Deal With :Target in CSS?</a>, and <a href="http://dev.opera.com/articles/view/css3-target-based-interfaces/">CSS3 :target based interfaces</a></cite></p>

CSS

#slideshow {
	margin: 50px auto;
	position: relative;
	width: 400px; height:500px;
}

ul {
  list-style: none;
}

li {
	float: left;
	overflow: hidden;
	margin: 0 20px 0 0;
	
}

li a {
	color: #222;
	text-decoration: none;
	font: 15px/1 Helvetica, sans-serif;
	
	-webkit-transition: color 0.5s ease;
	   -moz-transition: color 0.5s ease;
	     -o-transition: color 0.5s ease;
	    -ms-transition: color 0.5s ease;
	        transition: color 0.5s ease;
}

li a:hover {
	color: #50b0df;
}

li img {
  position: absolute;
  top: 50px;
  left: 0;
  z-index: -1;
  
  -webkit-transition: opacity 1s ease-in-out;
     -moz-transition: opacity 1s ease-in-out;
       -o-transition: opacity 1s ease-in-out;
      -ms-transition: opacity 1s ease-in-out;
          transition: opacity 1s ease-in-out;

}

li img:target {
	z-index: 1;
}

li img:not(:target) {
	opacity: 0;
}
li div{ height:350px; width:400px; background:url("http://dev.bowdenweb.com/a/i/anim/fuck-01.gif") 0 0 no-repeat;
  position: absolute;
  top: 50px;
  left: 0;
  z-index: -1;
  
  -webkit-transition: opacity 1s ease-in-out;
     -moz-transition: opacity 1s ease-in-out;
       -o-transition: opacity 1s ease-in-out;
      -ms-transition: opacity 1s ease-in-out;
          transition: opacity 1s ease-in-out;

}
li div:target {
	z-index: 1;
    background-position:0 0; background-repeat:no-repeat;
}
li div#five{background-image:url("http://dev.bowdenweb.com/a/i/anim/an-fuck-01-not-animated.gif")}
li div#six{background-image:url("http://dev.bowdenweb.com/a/i/anim/fuck-01.gif")}
li div:not(:target) {
	opacity: 0;
}


p{clear:left; float:none}