Melting Ice Cream Hover Card

Perfect for food blogs or playful startups. We utilize CSS border-radius morphing and animated pseudo-elements to literally simulate viscous ice cream melting down a cone!

Viscous Dripping Keyframes

We create “drip” elements using absolute positioning overlapping the bottom edge of the ice cream header.

.drip {
  position: absolute;
  bottom: -10px;
  background: #fbcfe8; /* Strawberry pink */
  border-radius: 0 0 50px 50px;
  width: 20px;
  height: 10px;
  transition: height 1s ease-in;
}

.card:hover .drip {
  height: 60px; /* The drip falls down! */
}

Hover over the strawberry scoop in the Live Demo to see the edges organically melt and stretch downwards!