Design for AIBild-Zoom beim Hover
Bild-Zoom beim Hover: CSS-Card. Kopiere die Regeln oder den Prompt, der das Ergebnis nachbaut.
Motion that explains
Use easing to tell users where things went.
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
}
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>Prompt
Erstelle eine rahmenlose 300px Card: ein 190px Bildrahmen mit 12px Radius und overflow hidden, der einen radialen Gradient enthält (circle at 30% 30%, #f9a8d4 zu #c084fc zu #7e22ce). Darunter ein 18px Titel in #18181b und 14px Text in #52525b. Beim Hover das Bild über 600ms mit cubic-bezier(.2,.8,.2,1) auf 1.08 skalieren und den Titel mit 3px Offset unterstreichen.