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="row"> <div class="content"> obsah row </div> <div class="overlay"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> <div>6</div> <div>7</div> <div>8</div> <div>9</div> <div>10</div> </div> </div> <div class="row"> <div class="content"> obsah row<br> obsah row<br> obsah row<br> obsah row<br> obsah row<br> obsah row<br> obsah row<br> obsah row<br> obsah row<br> obsah row<br> </div> <div class="overlay"> <div>1</div> </div> </div>
HTML
Autoformát
Standardní režim
Mobilní zobrazení
.row { display: grid; grid-template: 1fr / 1fr; border: 1px solid gray; padding: 2rem; background: #f3f3f3; margin-bottom: 2rem; } .row>* { grid-column: 1 / 1; grid-row: 1 / 1; width: 100%; } .row .overlay { z-index: 2; background: rgba(0, 0, 0, 0.5); display: none; } .row:hover .overlay { display: block; } .row .content { 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>