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
<div class="obal"> <div class="pre-obrazok"> <img src="http://ukazky.mujskript.cz/img/Funny-Guy-Profil-Pic-Bing-1920x1080-Resolution-Pictures-And-Wallpapers.jpg" width="100%"> <div class="vrstva"></div> </div> <p>Pri nájdení myšky sa zobrazi pôvodný obrázok. Vzor, ktorý obrázok prekrýva vyzerá <a href="http://ukazky.mujskript.cz/img/contemporary_china_2.png" target="_blank">takto</a>.</p> </div>
HTML
Autoformát
Standardní režim
Mobilní zobrazení
.obal { width: 400px; padding: 5px; border: 1px solid; float: left; } .pre-obrazok { position: relative; } .vrstva { position: absolute; left: 0; top: 0; right: 0; bottom: 0; opacity: 0.9; background: url(http://ukazky.mujskript.cz/img/contemporary_china_2.png) #FFF; } .vrstva:hover { opacity: 0; }
CSS
Autoformát
CSS reset
Až na konci
J
ava
S
cript
Autoformát
jQuery
Umístění JS
window.onload
</head>
</body>