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> <a href='#' class=obrazek1> <img src='http://teststranek.kvalitne.cz/images/obrazek-1bw.jpg'></a> </p> <p> <a href='#' class=obrazek2> <img src='http://teststranek.kvalitne.cz/images/obrazek-1.jpg'></a> </p>
HTML
Autoformát
Standardní režim
Mobilní zobrazení
.obrazek1 { display: inline-block; background: url(http://teststranek.kvalitne.cz/images/obrazek-1.jpg) } .obrazek1 img { border: 0; vertical-align: bottom; -webkit-transition: opacity 1.2s; -moz-transition: opacity 1.2s; -o-transition: opacity 1.2s; transition: opacity 1.2s; } .obrazek1:hover img { filter: alpha (opacity=0); opacity: 0; } /* kuku */ .obrazek2 { display: inline-block; background: url(http://teststranek.kvalitne.cz/images/obrazek-1bw.jpg) } .obrazek2 img { vertical-align: bottom; filter: alpha (opacity=0); opacity: 0; -webkit-transition: opacity 1.2s; -moz-transition: opacity 1.2s; -o-transition: opacity 1.2s; transition: opacity 1.2s; } .obrazek2:hover img { filter: alpha (opacity=0); 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>