CSS only image switching

by hondana

HTML

<div class="css-switch">
      <ul>
        <li id="image1"><img src="data:image/gif;base64,R0lGODlhyADIAIAAAP8AAP///yH5BAAHAP8ALAAAAADIAMgAAAL/hI+py+0Po5y02ouz3rz7D4biSJbmiabqyrbuC8fyTNf2jef6zvf+DwwKh8Si8YhMKpfMpvMJjUqn1Kr1is1qt9yu9wsOi8fksvmMTqvX7Lb7DY/L5/S6/Y7P6/f8vv8PGCg4SFhoeIiYqLjI2Oj4CBkpOUlZaXmJmam5ydnp+QkaKjpKWmp6ipqqusra6voKGys7S1tre4ubq7vL2+v7CxwsPExcbHyMnKy8zNzs/AwdLT1NXW19jZ2tvc3d7f0NHi4+Tl5ufo6err7O3u7+Dh8vP09fb3+Pn6+/z9/v/w8woMCBBAsaPIgwocKFDBs6fAgxosSJFCtavIgxo8aNBhw7eixTAAA7" alt=""></li>
        <li id="image2"><img src="data:image/gif;base64,R0lGODlhyADIAIAAADMA/////yH5BAAHAP8ALAAAAADIAMgAAAL/hI+py+0Po5y02ouz3rz7D4biSJbmiabqyrbuC8fyTNf2jef6zvf+DwwKh8Si8YhMKpfMpvMJjUqn1Kr1is1qt9yu9wsOi8fksvmMTqvX7Lb7DY/L5/S6/Y7P6/f8vv8PGCg4SFhoeIiYqLjI2Oj4CBkpOUlZaXmJmam5ydnp+QkaKjpKWmp6ipqqusra6voKGys7S1tre4ubq7vL2+v7CxwsPExcbHyMnKy8zNzs/AwdLT1NXW19jZ2tvc3d7f0NHi4+Tl5ufo6err7O3u7+Dh8vP09fb3+Pn6+/z9/v/w8woMCBBAsaPIgwocKFDBs6fAgxosSJFCtavIgxo8aNBhw7eixTAAA7" alt=""></li>
        <li id="image3"><img src="data:image/gif;base64,R0lGODlhyADIAIAAAGbMAP///yH5BAAHAP8ALAAAAADIAMgAAAL/hI+py+0Po5y02ouz3rz7D4biSJbmiabqyrbuC8fyTNf2jef6zvf+DwwKh8Si8YhMKpfMpvMJjUqn1Kr1is1qt9yu9wsOi8fksvmMTqvX7Lb7DY/L5/S6/Y7P6/f8vv8PGCg4SFhoeIiYqLjI2Oj4CBkpOUlZaXmJmam5ydnp+QkaKjpKWmp6ipqqusra6voKGys7S1tre4ubq7vL2+v7CxwsPExcbHyMnKy8zNzs/AwdLT1NXW19jZ2tvc3d7f0NHi4+Tl5ufo6err7O3u7+Dh8vP09fb3+Pn6+/z9/v/w8woMCBBAsaPIgwocKFDBs6fAgxosSJFCtavIgxo8aNBhw7eixTAAA7" alt=""></li>
      </ul>
      <p>
        <a href="#image1">image1</a>
        <a href="#image2">image2</a>
        <a href="#image3">image3</a>
      </p>
    </div>

CSS

.css-switch {
      position: relative;
      height: 300px;
    }
    .css-switch ul {
      list-style-type: none;
      height: 200px;
    }
    .css-switch img {
      position: absolute;
      left: 10px;
      top: 10px;
    }
    .css-switch p {
      position: absolute;
      top: 220px;
    }
    .css-switch a {
      margin: 10px 20px;
    }
    .css-switch li:target img { 
      z-index: 100; 
    }