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="galeria"> <input type="checkbox" id="obr-id-1"> <label for="obr-id-1"> <img src="/i/300x300"> <label for="obr-id-1"> <div> <p>Obsah súvisiaci s prvým obrázkom... <br><br><br><br><br><br><br><br> <p>Ďalší dlhší obsah... <br><br><br><br><br><br><br><br> <p>Ehm.</p> </div> </label> </label> <input type="checkbox" id="obr-id-2"> <label for="obr-id-2"> <img src="/i/300x300"> <label for="obr-id-2"> <div> <p>Obsah súvisiaci s druhým obrázkom... </div> </label> </label> <input type="checkbox" id="obr-id-3"> <label for="obr-id-3"> <img src="/i/300x300"> <label for="obr-id-3"> <div> <p>Obsah súvisiaci s tretím obrázkom... </div> </label> </label> <input type="checkbox" id="obr-id-4"> <label for="obr-id-4"> <img src="/i/300x300"> <label for="obr-id-4"> <div> <p>Obsah súvisiaci so štvrtým obrázkom... </div> </label> </label> <input type="checkbox" id="obr-id-5"> <label for="obr-id-5"> <img src="/i/300x300"> <label for="obr-id-5"> <div> <p>Obsah súvisiaci s piatym obrázkom... </div> </label> </label> <input type="checkbox" id="obr-id-6"> <label for="obr-id-6"> <img src="/i/300x300"> <label for="obr-id-6"> <div> <p>Obsah súvisiaci so šiestym obrázkom... </div> </label> </label> </div>
HTML
Autoformát
Standardní režim
Mobilní zobrazení
.galeria { width: 910px; margin: auto; } .galeria input { visibility: hidden; position: fixed; left: -9999px; } .galeria > label { position: relative; float: left; width: 300px; height: 300px; overflow: hidden; margin-top: 5px; } .galeria label + input + label { margin-left: 5px; } .galeria label:nth-child(3n+2) { margin-left: 0; } .galeria label img { transition: .4s; } .galeria label:hover img { transform: scale(1.2); } .galeria label label { top: 0; left: 0; right: 0; bottom: 0; } .galeria label:hover label { position: absolute; background-color: rgba(0, 0, 0, 0.65); } .galeria label label div { display: none; } .galeria input:checked + label label { position: fixed; background-color: rgba(0, 0, 0, 0.8); transition: none; opacity: 1; z-index: 1; } .galeria input:checked + label:hover img { transform: none; } .galeria input:checked + label label div { position: absolute; width: 400px; left: 50%; margin-left: -200px; top: 50px; bottom: 50px; overflow: auto; display: block; } .galeria div p { padding: 10px; background: white; border: 1px solid black; }
CSS
Autoformát
CSS reset
Až na konci
J
ava
S
cript
Autoformát
jQuery
Umístění JS
window.onload
</head>
</body>