Line 5: | Line 5: | ||
<title>Home</title> | <title>Home</title> | ||
<style> | <style> | ||
− | :focus{ | + | :focus{ |
outline:none; | outline:none; | ||
} | } | ||
− | .gallery{ | + | .impression-gallery{ |
margin:20px auto; | margin:20px auto; | ||
width:900px; | width:900px; | ||
Line 14: | Line 14: | ||
position:relative; | position:relative; | ||
} | } | ||
− | a{ | + | .impression-gallery a{ |
display:inline-block; | display:inline-block; | ||
width:25%; | width:25%; | ||
Line 25: | Line 25: | ||
overflow: hidden; | overflow: hidden; | ||
} | } | ||
− | a img{ | + | .impression-gallery a img{ |
display:block; | display:block; | ||
width:100%; | width:100%; | ||
Line 77: | Line 77: | ||
cursor:pointer; | cursor:pointer; | ||
} | } | ||
− | a:focus~.closed, a:focus~.closed-layer{ | + | .impression-gallery a:focus~.closed, a:focus~.closed-layer{ |
display:block; | display:block; | ||
} | } | ||
− | a:focus{ | + | .impression-gallery a:focus{ |
border:none; | border:none; | ||
overflow: visible; | overflow: visible; | ||
} | } | ||
− | a:focus img{ | + | .impression-gallery a:focus img{ |
width:250%; | width:250%; | ||
height:auto; | height:auto; | ||
Line 102: | Line 102: | ||
z-index:25; | z-index:25; | ||
} | } | ||
− | a:focus:nth-child(4n+1) img{ | + | .impression-gallery a:focus:nth-child(4n+1) img{ |
left:150px; | left:150px; | ||
} | } | ||
− | a:focus:nth-child(4n+2) img{ | + | .impression-gallery a:focus:nth-child(4n+2) img{ |
left:-50px; | left:-50px; | ||
} | } | ||
− | a:focus:nth-child(4n+3) img{ | + | .impression-gallery a:focus:nth-child(4n+3) img{ |
left:-250px; | left:-250px; | ||
} | } | ||
− | a:focus:nth-child(4n+4) img{ | + | .impression-gallery a:focus:nth-child(4n+4) img{ |
left:-460px; | left:-460px; | ||
} | } | ||
− | a:focus:nth-child(-n+4) img{ | + | .impression-gallery a:focus:nth-child(-n+4) img{ |
top:140px; | top:140px; | ||
} | } | ||
− | a:focus:nth-child(n+9) img{ | + | .impression-gallery a:focus:nth-child(n+9) img{ |
top:-150px; | top:-150px; | ||
} | } | ||
− | a:focus:nth-child(n+13) img{ | + | .impression-gallery a:focus:nth-child(n+13) img{ |
top:-295px; | top:-295px; | ||
} | } | ||
Line 269: | Line 269: | ||
− | <div class="gallery"> | + | <div class="impression-gallery"> |
<a tabindex="1"><img src="http://placekitten.com/600/600"></a> | <a tabindex="1"><img src="http://placekitten.com/600/600"></a> | ||
<a tabindex="1"><img src="http://placekitten.com/600/600"></a> | <a tabindex="1"><img src="http://placekitten.com/600/600"></a> |
Revision as of 12:56, 19 October 2016