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="card-container"> <h1>Nadpis</h1> <div class="card"> <div class="card-imgBx"> <img src="https://newlinesmag.com/wp-content/uploads/OlaFinalAvatar-260x260.jpg"> </div> <div class="card-content-title"> <h2>Jmeno prijmeni</h2> </div> <div class="card-content"> <p> · 1 <br> · 2 <br> · 3 </p> </div> </div> <h1>Nadpis</h1> <div class="card"> <div class="card-imgBx"> <img src="https://newlinesmag.com/wp-content/uploads/OlaFinalAvatar-260x260.jpg"> </div> <div class="card-content-title"> <h2>Jmeno prijmeni</h2> </div> <div class="card-content"> <p> · 1 <br> · 2 <br> · 3 </p> </div> </div> <h1>Nadpis</h1> <div class="card"> <div class="card-imgBx"> <img src="https://newlinesmag.com/wp-content/uploads/OlaFinalAvatar-260x260.jpg"> </div> <div class="card-content-title"> <h2>Jmeno prijmeni</h2> </div> <div class="card-content"> <p> · 1 <br> · 2 <br> · 3 </p> </div> </div> <h1>Nadpis</h1> <div class="card"> <div class="card-imgBx"> <img src="https://newlinesmag.com/wp-content/uploads/OlaFinalAvatar-260x260.jpg"> </div> <div class="card-content-title"> <h2>Jmeno prijmeni</h2> </div> <div class="card-content"> <p> · 1 <br> · 2 <br> · 3 </p> </div> </div> </div>
HTML
Autoformát
Standardní režim
Mobilní zobrazení
* { padding: 0; margin: 0; } .card-container { display: flex; flex-wrap: wrap; margin-top: 20px; } .card { width: 100%; max-width: 300px; height: 300px; background-color: #222c3c; display: flex; flex-direction: column; margin: 50px 10px; transition: 0.3s ease-in-out; } .card:hover { height: 450px; } .card-imgBx { width: 260px; height: 260px; position: relative; top: -60px; left: 20px; z-index: 1; } .card-imgBx img { border-radius: 4px; } .card-content-title { padding: 0 20px; color: #c2c2c2; } .card-content { padding: 20px; margin-top: -150px; color: #c2c2c2; visibility: hidden; opacity: 0; transition: 0.3s ease-in-out; } .card:hover .card-content { margin-top: 0; visibility: visible; opacity: 1; transition-delay: 0.3s; }
CSS
Autoformát
CSS reset
Až na konci
J
ava
S
cript
Autoformát
jQuery
Umístění JS
window.onload
</head>
</body>