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
<a href="#"> <div class="foto"> <div class="spodni-pruh"> <div class="horni-pruh">Pěkný prase </div> </div> </div> </a>
HTML
Autoformát
Standardní režim
Mobilní zobrazení
.foto { width: 620px; height: 430px; background-image: url(http://www.ireceptar.cz/res/data/241/028837.jpg); position: relative; } .horni-pruh { width: 100%; background-color: black; filter: alpha(opacity=70); -moz-opacity: 0.7; -khtml-opacity: 0.7; opacity: 0.7; position: absolute; bottom: 0; padding: 15px 0px; font-family: sans-serif; font-weight: bold; color: white; text-align: center; } .spodni-pruh { width: 100%; background: url("http://files.untitledproject.cz/200000255-15a6b16a0c/pruhledne_png.png"); position: absolute; bottom: 0; padding: 15px 0px; font-family: sans-serif; font-weight: bold; color: white; text-align: center; } a:hover .foto .horni-pruh { width: 100%; background-color: #0099CC; filter: alpha(opacity=70); -moz-opacity: 0.7; -khtml-opacity: 0.7; opacity: 0.7; position: absolute; bottom: 0; padding: 15px 0px; font-family: sans-serif; font-weight: bold; color: white; text-align: center; }
CSS
Autoformát
CSS reset
Až na konci
/
J
ava
S
cript
Autoformát
jQuery
Umístění JS
window.onload
</head>
</body>