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="container"> <div class="row"> <div class="col-md-6"> <div class="obrazek"> <img src="i/300"> <div>popisek</div> </div> </div> <div class="col-md-6"> <div class="obrazek"> <img src="i/300"> <div>popisek</div> </div </div> <div class="col-md-6"> <div class="obrazek"> <img src="i/300"> <div>popisek</div> </div> </div> <div class="col-md-6"> <div class="obrazek"> <img src="i/300"> <div>popisek</div </div> </div> </div> </div>
HTML
Autoformát
Standardní režim
Mobilní zobrazení
.obrazek { position: relative; background: blue; line-height:0; float:left ; } .obrazek div { line-height: 1.5em; width: 100%; position: absolute; bottom: 0; background: red; overflow: hidden; height: 0; -webkit-transition: height 0.35s; -moz-transition: height 0.35s; -o-transition: height 0.35s; transition: height 0.35s; } .obrazek:hover div { height: 5.5em; }
CSS
Autoformát
CSS reset
Až na konci
J
ava
S
cript
Autoformát
jQuery
Umístění JS
window.onload
</head>
</body>