# Getöntes Glow-Anheben (C 036)

Kategorie: Cards  
Tags: hover-lift, glow, image-top, light, shadow  
Seite: https://designforai.dev/de/snippet/card-036

## Prompt

Baue eine 270px weiße Card mit 14px Padding, 18px Radius und einem zarten 1px #ede9fe Rahmen. Bildplatzhalter 150px mit 12px Radius und einem 135deg violetten Gradient #c4b5fd zu #7c3aed. 17px Titel #1e1b4b, 13px Text in #6d28d9. Beim Hover die Card mit einer federnden cubic-bezier(.2,.8,.2,1) 250ms Transition 8px anheben und einen violetten Glow-Schatten 0 24px 48px -12px rgba(124,58,237,.45) hinzufügen.

## HTML

```html
<article class="card-036">
  <div class="card-036__img"></div>
  <h3>Lift and glow</h3>
  <p>Rises on hover and casts a tinted shadow instead of a gray one.</p>
</article>
```

## CSS

```css
.card-036 {
  width: 270px;
  padding: 14px;
  background: #fff;
  border-radius: 18px;
  border: 1px solid #ede9fe;
  font-family: system-ui,sans-serif;
  color: #1e1b4b;
  transition: transform .25s cubic-bezier(.2,.8,.2,1),box-shadow .25s
}
.card-036:hover {
  transform: translateY(-8px);
  box-shadow: 0 24px 48px -12px rgba(124,58,237,.45)
}
.card-036__img {
  height: 150px;
  border-radius: 12px;
  background: linear-gradient(135deg,#c4b5fd,#7c3aed)
}
.card-036 h3 {
  margin: 14px 4px 4px;
  font-size: 17px
}
.card-036 p {
  margin: 0 4px 6px;
  font-size: 13px;
  line-height: 1.5;
  color: #6d28d9
}
```