Design for AIHochgleitendes Hinzufügen
Hochgleitendes Hinzufügen: CSS-Card. Kopiere die Regeln oder den Prompt, der das Ergebnis nachbaut.
Ceramic pour-over set
$64
CSS
.card-021 {
width: 230px;
font-family: system-ui,sans-serif;
color: #1a1a1a
}
.card-021__img {
position: relative;
height: 230px;
border-radius: 10px;
overflow: hidden;
background: radial-gradient(circle at 60% 40%,#fef3c7,#d97706 80%)
}
.card-021 button {
position: absolute;
left: 10px;
right: 10px;
bottom: 10px;
padding: 10px;
border: 0;
border-radius: 8px;
background: #1a1a1a;
color: #fff;
font-size: 13px;
font-weight: 600;
cursor: pointer;
transform: translateY(60px);
opacity: 0;
transition: transform .25s,opacity .25s
}
.card-021:hover button {
transform: none;
opacity: 1
}
.card-021 h3 {
margin: 12px 0 2px;
font-size: 14px;
font-weight: 500
}
.card-021 p {
margin: 0;
font-size: 14px;
color: #555
}
.card-021 :is(a,button,input,select,textarea):focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
HTML
<article class="card-021">
<div class="card-021__img"><button>Quick add +</button></div>
<h3>Ceramic pour-over set</h3>
<p>$64</p>
</article>Prompt
Baue eine 230px minimalistische Produkt-Card ohne Rahmen: ein 230px quadratisches Bild (10px Radius, radialer Gradient von #fef3c7 zu #d97706), das einen versteckten schwarzen "Quick add +" Button enthält, unten mit 10px Abstand fixiert, der beim Hover aus 60px darunter hochgleitet und einblendet (250ms). Unter dem Bild: 14px Produktname in #1a1a1a und ein 14px Preis in #555.