<style>

ul.gallery{
  list-style: none;
  margin: 0;
  padding: 0;
}

ul.gallery li{
  display: block;
  width: 200px; /* width of gallery */
  height: 50px; /* portion of each gallery image that's shown initially */
  position: relative;
  -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}


ul.gallery li img{
  position: absolute;
  width: 100%;
  border: 10px solid #D8D2A2;
 -webkit-filter: grayscale(1);
  -moz-filter: grayscale(1);
    filter: url(#grayscale);
  filter: grayscale(1);
    -webkit-transition: all .5s ease-in-out; /* CSS3 transition setting */
    -moz-transition: all .5s ease-in-out;
  transition: all .5s ease-in-out;
}


ul.gallery li:focus{ /* when a LI receives focus (clicked on) */
  z-index: 100;
    outline: none;
    -webkit-transform: rotate(3deg); /* rotate enlarged LI by 3 degrees */
    -moz-transform: rotate(3deg);
    transform: rotate(3deg);
    pointer-events: none; /* disable pointer events on enlarged LI so thumbnail(s) beneath it can receive those events */
}

ul.gallery li:nth-of-type(even):focus{ /* even LIs that received focus */
    -webkit-transform: rotate(-1deg); /* rotate enlarged LI by -1 degrees instead */
    -moz-transform: rotate(-1deg);
    transform: rotate(-1deg);
}

ul.gallery li:focus img{
  -webkit-transform: scale(2) translateX(80%); /* enlarge focused image and move horizontally */
  -moz-transform: scale(2) translateX(80%);
  transform: scale(2) translateX(80%);
  top: 10px; /* shift enlarged image downwards by 10px */
    outline: none;
  box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.4);
  -webkit-filter: grayscale(0); /* nullify grayscale effect */
  filter: none;
}

ul.gallery li:first-of-type:focus img{ /* first image within list of thumbnails that receives focus */
  top: 80px; /* move image down by 80px so it's not obscured by top of window edge */
}

svg{
    position: absolute;
    visibility: hidden;
}

</style>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
    <filter id="grayscale">
        <feColorMatrix type="matrix" values="0.3333 0.3333 0.3333 0 0
        0.3333 0.3333 0.3333 0 0
        0.3333 0.3333 0.3333 0 0
        0 0 0 1 0" />
    </filter>
</svg>
<ul class="gallery" title="Tab after clicking on a thumbnail to cycle though thumbnails">
<li tabindex="1"><img src="Η ΔΙΕΥΘΥΝΣΗ ΤΗΣ ΕΙΚΌΝΑΣ ΣΑΣ" /></li>
<li tabindex="2"><img src="Η ΔΙΕΥΘΥΝΣΗ ΤΗΣ ΕΙΚΌΝΑΣ ΣΑΣ" /></li>
<li tabindex="3"><img src="Η ΔΙΕΥΘΥΝΣΗ ΤΗΣ ΕΙΚΌΝΑΣ ΣΑΣ" /></li>
<li tabindex="4"><img src="Η ΔΙΕΥΘΥΝΣΗ ΤΗΣ ΕΙΚΌΝΑΣ ΣΑΣ" /></li>
<li tabindex="5"><img src="Η ΔΙΕΥΘΥΝΣΗ ΤΗΣ ΕΙΚΌΝΑΣ ΣΑΣ" /></li>
<li tabindex="6"><img src="Η ΔΙΕΥΘΥΝΣΗ ΤΗΣ ΕΙΚΌΝΑΣ ΣΑΣ" /></li>
</ul>