<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: 5px solid #B2C27B;
-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="https://jegvirag.gportal.hu/portal/jegvirag/image/gallery/1647351572.jpg" /></li>
<li tabindex="2"><img src="https://jegvirag.gportal.hu/portal/jegvirag/image/gallery/1647351591.jpg" /></li>
<li tabindex="3"><img src="https://jegvirag.gportal.hu/portal/jegvirag/image/gallery/1647351617.jpg" /></li>
<li tabindex="4"><img src="https://jegvirag.gportal.hu/portal/jegvirag/image/gallery/1647351637.jpg" /></li>
<li tabindex="5"><img src="https://jegvirag.gportal.hu/portal/jegvirag/image/gallery/1647351658.jpg" /></li>
<li tabindex="6"><img src="https://jegvirag.gportal.hu/portal/jegvirag/image/gallery/tn_1587025417_20.jpg" /></li>
</ul>
AJÁNLOM AZ OLDALT
Archívum