# Bild mit Verlauf unten (C 003)

Kategorie: Cards  
Tags: content, image-top, overlay, dark, gradient  
Seite: https://designforai.dev/de/snippet/card-003

## Prompt

Erstelle eine 300x380px Hochformat-Card, 18px Radius, komplett bedeckt von einem 200deg Gradient #0ea5e9 zu #6366f1 zu #312e81 als Bild. Lege einen Verlauf von unten nach oben darüber, von rgba(0,0,0,.75) zu transparent bei 55%. Verankere den Text unten links mit 22px Abstand: ein 12px Versalien-Label "Case study" bei 80% Deckkraft und ein 22px weißer Titel. Beim Hover den Verlauf vertiefen, sodass er 70% der Card hinaufreicht.

## HTML

```html
<article class="card-003">
  <div class="card-003__text">
    <small>Case study</small>
    <h3>Rebuilding a checkout in six weeks</h3>
  </div>
</article>
```

## CSS

```css
.card-003 {
  position: relative;
  width: 300px;
  height: 380px;
  border-radius: 18px;
  overflow: hidden;
  background: linear-gradient(200deg,#0ea5e9,#6366f1 55%,#312e81);
  font-family: system-ui,sans-serif;
  color: #fff
}
.card-003::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top,rgba(0,0,0,.75) 0,rgba(0,0,0,0) 55%)
}
.card-003__text {
  position: absolute;
  left: 22px;
  right: 22px;
  bottom: 22px;
  z-index: 1
}
.card-003 small {
  display: block;
  margin-bottom: 6px;
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  opacity: .8
}
.card-003 h3 {
  margin: 0;
  font-size: 22px;
  line-height: 1.2
}
.card-003:hover::after {
  background: linear-gradient(to top,rgba(0,0,0,.85) 0,rgba(0,0,0,.1) 70%)
}
```