Bilderwechsel einer Galerie ohne JS

by Jens Grochtdreis

HTML

<nav> 
  <ul> 
    <li> 
      <a href=#pic1> 
          <img src="http://placehold.it/70/000/fff" alt="Picture 1"> 
      </a> 
    <li> 
      <a href=#pic2> 
          <img src="http://placehold.it/70/a200000/fff" alt="Picture 2"> 
      </a> 
    <li> 
      <a href=#pic3> 
          <img src="http://placehold.it/70/09f/fff" alt="Picture 3"> 
      </a> 
  </ul> 
</nav> 
<ul> 
  <li id=pic1> 
    <img src="http://placehold.it/400x200/000/fff" alt=""> 
  <li id=pic2> 
    <img src="http://placehold.it/400x200/a200000/fff" alt=""> 
  <li id=pic3> 
    <img src="http://placehold.it/400x200/09f/fff" alt=""> 
</ul>

CSS

ul{list-style:none}
nav ul a { text-decoration: none;}
img{ vertical-align:middle;
    -webkit-border-radius:7px;
       -moz-border-radius:7px;
            border-radius:7px;
       -webkit-box-shadow:0 1px 1px rgba(0,0,0,.4);
          -moz-box-shadow:0 1px 1px rgba(0,0,0,.4);    
               box-shadow:0 1px 1px rgba(0,0,0,.4);
    }
nav ul{position:absolute;width:100%;top:260px;text-align:center}
nav li{display:inline}
nav li + li {margin-left:10px}
nav :link:active, nav :visited:active {outline:none;position:relative;top:1px}
nav + ul {position:relative;width:400px;margin:20px auto}
nav + ul li {
    position:absolute;
    opacity:0;
-webkit-transition:opacity 1.5s ease-out;
   -moz-transition:opacity 1.5s ease-out;
     -o-transition:opacity 1.5s ease-out;
        transition:opacity 1.5s ease-out;
    }
nav + ul li:target{
    opacity:1;
    z-index:1;
    }