Bring a sense of calm to your UI with this cozy coffee card. This tutorial utilizes advanced CSS keyframes to create continuous floating steam and clever hover transitions for the tilt effect.

The Steaming Effect

Using pure CSS, we animate multiple div blocks vertically to mimic organic vapor.

.steam {
  width: 15px;
  height: 15px;
  background: rgba(255,165,0,0.4);
  border-radius: 50%;
  animation: floatUp 3s infinite linear;
  filter: blur(8px);
}
@keyframes floatUp {
  0% { transform: translateY(0) scale(1); opacity: 0; }
  50% { opacity: 1; }
  100% { transform: translateY(-80px) scale(3); opacity: 0; }
}

Check out the warm hover tilt and inspirational quote in the Live Demo!