Nová ukázka
Reset
Načíst z URL
Uložit a získat odkaz
Vztahuje se k…
Nevyplňujte
Napiště „nejsem robot“
▶
Přepnout zobrazení
Výsledek
<p class="c-foto"> <a href="#"> <img src="http://www.volny.cz/cbov/akce09/img_um09/um04n.jpg"></a> <a href="#"> <img src="http://www.volny.cz/cbov/akce09/img_um09/um04n.jpg"></a> <br> <a href="#"> <img src="http://www.volny.cz/cbov/akce09/img_um09/um04n.jpg"></a> <a href="#"> <img src="http://www.volny.cz/cbov/akce09/img_um09/um04n.jpg"></a> </p>
HTML
Autoformát
Standardní režim
Mobilní zobrazení
a img { border: none; vertical-align: bottom; } .c-foto a { display: inline-block; margin: 2px; background: blue; } .c-foto a img { opacity: 0.4; -webkit-transition: opacity 1s; -moz-transition: opacity 1s; -o-transition: 1s; transition: 1s; } .c-foto a:hover,.c-foto a:active { border: solid red; border-width: 0 2px 2px 0; margin: 2px 0px 0 2px; position: relative; top: -2px; left: -2px; } .c-foto a:hover img,.c-foto a:active img { opacity: 1; }
CSS
Autoformát
CSS reset
Až na konci
J
ava
S
cript
Autoformát
jQuery
Umístění JS
window.onload
</head>
</body>