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
<form class="material-selection"> <div class="options"> <div> <input type="radio" checked id="americky-orech" name="material"> <label for="americky-orech">Americký orech</label> <img src="i/300x300/123456"> </div> <div> <input type="radio" id="indicka-jablon" name="material"> <label for="indicka-jablon">Indická jabloň</label> <img src="i/300x300/654321"> </div> <div> <input type="radio" id="makore" name="material"> <label for="makore">Makoré</label> <img src="i/300x300/9294D3"> </div> <div> <input type="radio" id="jasan-fladr" name="material"> <label for="jasan-fladr">Jasan fládr</label> <img src="i/300x300/237262"> </div> <div> <input type="radio" id="jasan-jadrovy" name="material"> <label for="jasan-jadrovy">Jasan jádrový</label> <img src="i/300x300/654321"> </div> <div> <input type="radio" id="mahagon" name="material"> <label for="mahagon">Mahagon</label> <img src="i/300x300/DEF236"> </div> </div> </form>
HTML
Autoformát
Standardní režim
Mobilní zobrazení
.material-selection { position: relative; width: 500px; } .options { float: right; width: 200px; } input { position: relative; margin: .75em .5em; float: left; } label { display: block; padding: .5em .3em .5em 1.8em; } input:hover + label, input:checked + label { background-color: #CCC; } img { position: absolute; left: 0; top: 0; opacity: 0; visibility: hidden; transition: .3s; } input:hover + label + img, input:checked + label + img { opacity: 1; visibility: visible; } input:hover + label + img { z-index: 1; }
CSS
Autoformát
CSS reset
Až na konci
J
ava
S
cript
Autoformát
jQuery
Umístění JS
window.onload
</head>
</body>