Gift Box Open Hover Effect: CSS Hover Effect

Gift Box Open Hover Effect

A ribboned gift box drawn as a real 3D box. On hover the lid springs up and tips back while a sparkle rises out of the opening. Box and lid are separate preserve-3d groups of faces.

Also known as: 3d gift box css, present box lid open, box lid lift hover.

Color Base size 16px Dark background Hold hover state

HTML

<div class="hfx-gift-box-open">
  <div class="hfx-gift-box-open-box">
    <div class="hfx-gift-box-open-inside"></div>
    <svg class="hfx-gift-box-open-spark" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 1c.7 5.2 2.8 8.3 11 11-8.2 2.7-10.3 5.8-11 11-.7-5.2-2.8-8.3-11-11 8.2-2.7 10.3-5.8 11-11z"/></svg>
    <div class="hfx-gift-box-open-front"></div>
    <div class="hfx-gift-box-open-side"></div>
    <div class="hfx-gift-box-open-lid">
      <div class="hfx-gift-box-open-lid-top"></div>
      <div class="hfx-gift-box-open-lid-front"></div>
      <div class="hfx-gift-box-open-lid-side"></div>
      <svg class="hfx-gift-box-open-bow" viewBox="0 0 48 28" aria-hidden="true"><path d="M24 24C18 14 4 6 3 14s11 10 21 10zm0 0c6-10 20-18 21-10s-11 10-21 10z"/></svg>
    </div>
  </div>
</div>

CSS

.hfx-gift-box-open {
  --c: var(--hfx-color, #3b82f6);
  --ribbon: #fcd34d;
  font-size: var(--hfx-size, 16px);
  display: grid;
  place-items: center;
  width: 11em;
  height: 12em;
  perspective: 40em;
}
.hfx-gift-box-open-box {
  position: relative;
  width: 0;
  height: 0;
  transform-style: preserve-3d;
  transform: translateY(2.4em) rotateX(-22deg) rotateY(-35deg);
}
.hfx-gift-box-open-box div,
.hfx-gift-box-open-box svg {
  position: absolute;
}
.hfx-gift-box-open-front,
.hfx-gift-box-open-side {
  left: -2.5em;
  top: -2em;
  width: 5em;
  height: 4em;
}
.hfx-gift-box-open-front {
  background: linear-gradient(90deg, transparent 42%, var(--ribbon) 42% 58%, transparent 58%), var(--c);
  transform: translateZ(2.5em);
}
.hfx-gift-box-open-side {
  background: linear-gradient(90deg, transparent 42%, #d4a017 42% 58%, transparent 58%), color-mix(in srgb, var(--c) 70%, #000);
  transform: rotateY(90deg) translateZ(2.5em);
}
.hfx-gift-box-open-inside {
  left: -2.5em;
  top: -2.5em;
  width: 5em;
  height: 5em;
  background: color-mix(in srgb, var(--c) 40%, #000);
  transform: translateY(-2em) rotateX(90deg);
}
.hfx-gift-box-open-lid {
  left: 0;
  top: 0;
  transform-style: preserve-3d;
  transform: translateY(-2em);
  transition: transform 0.55s cubic-bezier(0.3, 1.5, 0.5, 1);
}
.hfx-gift-box-open-lid-top {
  left: -2.75em;
  top: -2.75em;
  width: 5.5em;
  height: 5.5em;
  background:
    linear-gradient(90deg, transparent 42%, var(--ribbon) 42% 58%, transparent 58%),
    linear-gradient(transparent 42%, var(--ribbon) 42% 58%, transparent 58%),
    color-mix(in srgb, var(--c) 80%, #fff);
  transform: translateY(-0.9em) rotateX(90deg);
}
.hfx-gift-box-open-lid-front,
.hfx-gift-box-open-lid-side {
  left: -2.75em;
  top: -0.9em;
  width: 5.5em;
  height: 0.9em;
}
.hfx-gift-box-open-lid-front {
  background: linear-gradient(90deg, transparent 42%, var(--ribbon) 42% 58%, transparent 58%), color-mix(in srgb, var(--c) 90%, #000);
  transform: translateZ(2.75em);
}
.hfx-gift-box-open-lid-side {
  background: linear-gradient(90deg, transparent 42%, #d4a017 42% 58%, transparent 58%), color-mix(in srgb, var(--c) 62%, #000);
  transform: rotateY(90deg) translateZ(2.75em);
}
.hfx-gift-box-open-bow {
  left: -1.5em;
  top: -2.55em;
  width: 3em;
  height: 1.75em;
  fill: var(--ribbon);
  stroke: #d4a017;
  stroke-width: 1.5;
}
.hfx-gift-box-open-spark {
  left: -1.4em;
  top: -1.4em;
  width: 2.8em;
  height: 2.8em;
  fill: var(--ribbon);
  opacity: 0;
  transform: translateY(-1.5em) scale(0.2);
  transition: transform 0.5s cubic-bezier(0.3, 1.5, 0.5, 1), opacity 0.2s ease;
}
.hfx-gift-box-open:hover .hfx-gift-box-open-lid {
  transform: translateY(-4.4em) rotateX(-16deg) rotateZ(-12deg);
}
.hfx-gift-box-open:hover .hfx-gift-box-open-spark {
  opacity: 1;
  transform: translateY(-4.2em) scale(1);
  transition-delay: 0.12s;
}

@media (prefers-reduced-motion: reduce) {
  .hfx-gift-box-open, .hfx-gift-box-open *, .hfx-gift-box-open::before, .hfx-gift-box-open::after, .hfx-gift-box-open *::before, .hfx-gift-box-open *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

Customizing this snippet

Color: set --hfx-color on the element or a parent. Currently previewing #3b82f6.
Base size: set --hfx-size. Every other dimension is in em, so the whole thing scales together. Currently previewing 16px.
Speed: change the duration on the transition or animation shorthand. Staggered delays are relative, so they keep their rhythm.
Reduced motion: the rule at the end of the CSS turns the motion off for people who asked their OS for less of it. Keep it.

Gift Box Open Hover Effect

HTML

CSS

Customizing this snippet

Similar hover effects