<article class="card">
<h2><abbr title="Aren't you">Orange</abbr> you thirsty?</h2>
<div class="bg">
<img
src="img/orange-poly.svg"
alt="an orange cut in half facing up"
class="orange-halved"
>
</div>
</article>
@font-face {
font-family: Bangers;
src: url("./Bangers-Regular.ttf");
}
body {
height: 100dvh;
margin: 0;
display: grid;
place-items: center;
}
.card {
width: 60%;
max-width: 520px;
}
h2 {
margin: 0;
margin-block-end: 1.25rem;
text-align: center;
font-family: "Bangers", cursive;
font-size: clamp(1rem, 3.52vw + 0.23rem, 2.75rem);
font-weight: bold;
letter-spacing: 0.1em;
}
abbr {
font-size: 1.1em;
color: orange;
letter-spacing: 0.25em;
}
.bg {
display: block;
width: 100%;
margin: 0 auto;
cursor: pointer;
border-radius: 1rem;
background: rgba(219, 124, 0, 1);
transition: background 1.5s;
overflow: hidden;
}
.bg:hover {
background: orange url("img/offer-juice.webp");
background-position: 50% 80%;
background-size: cover;
background-size: 100%;
}
.orange-halved {
width: 100%;
}
.orange-halved:hover {
animation: spin 1s 1 forwards;
}
@keyframes spin {
to {
transform: rotate(720deg);
opacity: 0;
}
}
A whimsical take on a product card for orange juice that has a hover effect revealing the product, sort of. When you hover over the card, it reveals the product with a whirling animation as if the orange is being juiced.