Get a professional website for $99 per month. One week turnaround.

Image Reveal Effect on Scroll (

Home WordPress Image Reveal Effect on Scroll (

June 16, 2023

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

I recently came across this website ( and thought I would try to recreate the bottle image reveal effect using

Purchase Motion.Page:

Motion.Page Overview Video:


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

Credit: Stock Image Used

HTML & CSS Code:

.drink-outline {
  max-width: 450px;

.drink-color {
  position: absolute;
  overflow: hidden;
  height: 102%;

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

<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 class="drink-outline">
    <img decoding="async" src="drink-outline.jpg" alt="Drink outline" />

*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