Get a free website when you sign up for The No Fuss Package.

Image Reveal Effect on Scroll (Motion.page)

Home WordPress Image Reveal Effect on Scroll (Motion.page)

June 16, 2023

In this Motion.page tutorial I will show you how to do this cool image reveal effect when scrolling down the page.

I recently came across this website (https://kokokombucha.pl/) and thought I would try to recreate the bottle image reveal effect using Motion.page.

Purchase Motion.Page:
https://motion.page/go/wickydesign/

Motion.Page Overview Video:
https://www.youtube.com/watch?v=RW9Vwg5sZRo

Timestamps:

  • 0:00 Introduction
  • 0:34 Gather Image Assets
  • 1:14 Add HTML and CSS
  • 4:51 Motion.page Tutorial

Credit: Stock Image Used

HTML & CSS Code:

				
					<style>
.drink-outline {
  max-width: 450px;
}

.drink-color {
  position: absolute;
  overflow: hidden;
  max-width:450px;
  height: 102%;
}


.drink-line {
  position: absolute;
  bottom: 0;
  width: 450px;
  left: 50%;
  transform: translateX(-50%);
}
</style>


<div class="drink-color">
    <img decoding="async" src="line-overlay.jpg" alt="Drink line" class="drink-line" />
    <img decoding="async" src="drink-color.jpg" alt="Drink color" />
</div>
    
<div class="drink-outline">
    <img decoding="async" src="drink-outline.jpg" alt="Drink outline" />
</div>
           
				
			

*Some of the links on this page are affiliate links, meaning we may receive a commission if you follow them. This allows us to continue providing free content and educational resources for you. Thank you for supporting our small business!

More Free Resources