# Pie deslizante (C 040)

Categoría: Tarjetas  
Etiquetas: image, overlay, hover-reveal, caption, slide-up  
Página: https://designforai.dev/es/snippet/card-040

## Prompt

Construye una tarjeta de imagen de 280x200px (radio 14px, overflow hidden) rellena con un degradado a 160deg de #fbbf24 a #f97316 a #7c2d12 como foto. Un panel de pie de foto va fijado abajo, fondo rgba(15,23,42,.85), título blanco 16px y subtítulo 12px #cbd5e1, padding 16px 18px, oculto bajo la tarjeta con translateY(100%) y subiendo a la vista en hover durante 350ms con cubic-bezier(.2,.8,.2,1).

## HTML

```html
<figure class="card-040">
  <figcaption>
    <h3>Harbor at dusk</h3>
    <p>Series 03 · 24 frames</p>
  </figcaption>
</figure>
```

## CSS

```css
.card-040 {
  position: relative;
  width: 280px;
  height: 200px;
  margin: 0;
  border-radius: 14px;
  overflow: hidden;
  background: linear-gradient(160deg,#fbbf24,#f97316 45%,#7c2d12);
  font-family: system-ui,sans-serif;
  cursor: pointer
}
.card-040 figcaption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 16px 18px;
  background: rgba(15,23,42,.85);
  color: #fff;
  transform: translateY(100%);
  transition: transform .35s cubic-bezier(.2,.8,.2,1)
}
.card-040:hover figcaption {
  transform: none
}
.card-040 h3 {
  margin: 0 0 2px;
  font-size: 16px
}
.card-040 p {
  margin: 0;
  font-size: 12px;
  color: #cbd5e1
}
```