This project shows split-screen background images, each with overlays. When hovering the mouse on one side of the split screen, it expands to 75% while the other side reduces to 25%.
The background images are cupcakes from my favorite cupcake bakery, Sprinkles. They show the limited-time cupcakes for early March, 2022.
- Use CSS transitions to create the hover effects.
- Use JavaScript and the DOM to initiate the hover effects.
split-landing-page-demo.mov
View the Split Landing Page Project here: https://marisabrantley.github.io/scroll-animation-project/
Brad Traversy's Udemy Course "50 Projects in 50 Days"
https://www.udemy.com/course/50-projects-50-days/