# Polaroid-Rahmen (C 086)

Kategorie: Cards  
Tags: photo, polaroid, frame, rotated, light, caption  
Seite: https://designforai.dev/de/snippet/card-086

## Prompt

Erstelle eine 220px Foto-Card im Polaroid-Stil: weißer Rahmen mit 12px Padding an drei Seiten und 36px unten, kein Radius, Schatten 0 6px 18px rgba(0,0,0,.18), um 3deg gedreht und beim Hover mit 4px Anhebung aufrichtend. Das Foto ist ein 196px Block mit hartem Horizont-Gradient (#fdba74 zu #f97316 bis 45%, dann #1e3a8a zu #0f172a) mit leichtem saturate/contrast Filter. Bildunterschrift "Lisbon, March" darunter zentriert in einer Handschrift-Schrift, 15px, #374151.

## HTML

```html
<figure class="card-086">
  <div class="card-086__photo"></div>
  <figcaption>Lisbon, March</figcaption>
</figure>
```

## CSS

```css
.card-086 {
  width: 220px;
  margin: 0;
  padding: 12px 12px 36px;
  background: #fff;
  box-shadow: 0 6px 18px rgba(0,0,0,.18);
  transform: rotate(3deg);
  font-family: "Segoe Print","Bradley Hand",cursive;
  color: #374151;
  transition: transform .3s,box-shadow .3s
}
.card-086:hover {
  transform: rotate(0) translateY(-4px);
  box-shadow: 0 14px 30px rgba(0,0,0,.22)
}
.card-086__photo {
  height: 196px;
  background: linear-gradient(180deg,#fdba74 0,#f97316 45%,#1e3a8a 46%,#0f172a);
  filter: saturate(.9) contrast(1.05)
}
.card-086 figcaption {
  margin-top: 14px;
  text-align: center;
  font-size: 15px
}
```