Skip to content

Files

Latest commit

32f32e1 · Nov 21, 2021

History

History
13 lines (9 loc) · 783 Bytes

readme.md

File metadata and controls

13 lines (9 loc) · 783 Bytes

Orange you thirsty?

Whimsical take on a product card for orange juice. On hover, it reveals the product with an animation.

demo

It is a CSS-only hover effect, which is actually 2 separate animations:

  1. The first animation spins around the top layer, which has the picture of an orange slice, and it fades the opacity to 0.
  2. As the top layer fades, if the mouse is still hovering over the element, it will trigger the animation of the layer underneath, which raises the picture of the girl showing off her orange juice.

To see it in action: