Design for AIGleitende Bildunterschrift
Gleitende Bildunterschrift: CSS-Card. Kopiere die Regeln oder den Prompt, der das Ergebnis nachbaut.
Harbor at dusk
Series 03 · 24 frames
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
}
HTML
<figure class="card-040">
<figcaption>
<h3>Harbor at dusk</h3>
<p>Series 03 · 24 frames</p>
</figcaption>
</figure>Prompt
Baue eine 280x200px Bild-Card (14px Radius, overflow hidden), gefüllt mit einem 160deg Gradient #fbbf24 zu #f97316 zu #7c2d12 als Foto. Ein Bildunterschrift-Panel ist unten fixiert, Hintergrund rgba(15,23,42,.85), weißer 16px Titel und 12px #cbd5e1 Untertitel, Padding 16px 18px, unter der Card mit translateY(100%) versteckt und beim Hover über 350ms mit cubic-bezier(.2,.8,.2,1) ins Bild hochgleitend.