Difference between revisions of "Team:Duesseldorf/Test3"

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

Home