Back
Syntax
Study
Editor
Mode:
HTML
CSS
JavaScript
PHP
Reset
Run »
HTML / CSS / JS
.image-card { position: relative; overflow: hidden; } .image-card img { display: block; width: 100%; } .image-card .caption { position: absolute; bottom: 0; left: 0; right: 0; background: linear-gradient(transparent, rgba(0,0,0,0.7)); color: white; padding: 1rem; transform: translateY(100%); transition: transform 0.3s ease; } .image-card:hover .caption { transform: translateY(0); }
Result
Open