# Zoom de imagen (C 005)

Categoría: Tarjetas  
Etiquetas: content, basic, image-top, hover-zoom, light  
Página: https://designforai.dev/es/snippet/card-005

## Prompt

Crea una tarjeta sin borde de 300px: un marco de imagen de 190px con radio 12px y overflow hidden que contiene un degradado radial (circle at 30% 30%, de #f9a8d4 a #c084fc a #7e22ce). Debajo un título 18px en #18181b y texto 14px en #52525b. En hover escala la imagen a 1.08 durante 600ms con easing cubic-bezier(.2,.8,.2,1) y subraya el título con offset 3px.

## HTML

```html
<article class="card-005">
  <div class="card-005__frame"><div class="card-005__img"></div></div>
  <h3>Motion that explains</h3>
  <p>Use easing to tell users where things went.</p>
</article>
```

## CSS

```css
.card-005 {
  width: 300px;
  font-family: system-ui,sans-serif;
  color: #18181b
}
.card-005__frame {
  height: 190px;
  border-radius: 12px;
  overflow: hidden
}
.card-005__img {
  height: 100%;
  background: radial-gradient(circle at 30% 30%,#f9a8d4,#c084fc 60%,#7e22ce);
  transition: transform .6s cubic-bezier(.2,.8,.2,1)
}
.card-005:hover .card-005__img {
  transform: scale(1.08)
}
.card-005 h3 {
  margin: 14px 0 4px;
  font-size: 18px
}
.card-005 p {
  margin: 0;
  font-size: 14px;
  color: #52525b
}
.card-005:hover h3 {
  text-decoration: underline;
  text-underline-offset: 3px
}
```