Bildergalerie mit CSS3-Zoomfunktion
HTML
<div id="minigalerie">
<a href="#b1"><img src="http://placekitten.com/300/150" id="b1" width="100" height="50" /></a>
<a href="#b2"><img src="http://placedog.com/300/150" id="b2" width="100" height="50" /></a>
<a href="#b3"><img src="http://lorempixel.com/300/150" id="b3" width="100" height="50" /></a>
</div>
CSS
#minigalerie {
display: table;
border-spacing: 10px;
}
#minigalerie a {
display: table-cell;
vertical-align:column;
}
#minigalerie img {
-webkit-transition: 1s;
-moz-transition: 1s;
-0-transition: 1s;
transition: 1s;
}
#minigalerie img:target {
width: 300px;
height: 150px;
}
#minigalerie img {
background-color: #ffffff;
padding: 5px;
border-radius: 5px;
box-shadow: 0 0 7px rgba(100, 100, 100, 0.8);
}
JavaScript
// nach dem Artikel http://t3n.de/news/css3-minigalerie-zoomfunktion-ganz-ohne-javascript-351460/