Checkout this amazing 3d shine effect on hover made using plain simple CSS
This effect is achieved using perspective transforms and mask
Initially, the images are set with a specific perspective transform and gradient mask position in a way that it is hidden.
The transform rotate value and the mask’s position are changed on hover and they are auto-animated with the transition property.
Checkout the full source code below
Also, read 5 easy ways to center an element with CSS
- Flutter lookup failed in @fields error (solved) - July 14, 2023
- Free open source alternative to Notion along with AI - July 13, 2023
- Threads API for developers for programmatic access - July 12, 2023