About this snippet

Create a stylish caption reveal with this image overlay. When the user hovers over the photo, a dark gradient and text slide up from the bottom, keeping the design clean until interaction occurs.

Size
1.2 KB
Uses
HTML, CSS
Loads
placehold.co
Views
369
<div class="image-card">
  <img src="https://placehold.co/600x400/8b5cf6/ffffff?text=Portfolio" alt="Project">
  <div class="overlay-content">
    <h3>Project Title</h3>
    <p>Web Design / Development</p>
  </div>
</div>
.image-card {
  font-family: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  position: relative;
  width: 300px;
  height: 200px;
  border-radius: 12px;
  overflow: hidden;
  cursor: pointer;
  box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}
.image-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}
.image-card:hover img {
  transform: scale(1.1);
}
.overlay-content {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 20px;
  background: linear-gradient(to top, rgba(0,0,0,0.8), transparent);
  color: white;
  transform: translateY(20px);
  opacity: 0;
  transition: all 0.3s ease;
  box-sizing: border-box;
}
.image-card:hover .overlay-content {
  transform: translateY(0);
  opacity: 1;
}
.overlay-content h3 {
  margin: 0 0 5px 0;
  font-size: 1.2rem;
}
.overlay-content p {
  margin: 0;
  font-size: 0.9rem;
  opacity: 0.9;
}
Esc
↑↓ moveEnter select

Start from a template

Open an .html file, or HTML, CSS, JS, Markdown, Less or TypeScript files. You can also drop them here. Styles and scripts go into their panes.

Share

Source

Keyboard shortcuts

Save