Yogesh Chauhan's Blog

How to add before after image effect using pure CSS?

in CSS on August 1, 2021

The trick to create a before-after image effect using pure CSS is to add a div element inside another div element and adding background images for both. Once with effect using CSS filter property and one without.

This is what HTML will look like:


<div class="box">
  <div></div>
</div>


Let’s add a background-image for the outer div.

Let’s add another background image in inner div with filter property value as grayscale(90%). You can adjust the grayscale or use another value such as contrast or blur.

As you can see the inner div is on top now and you can’t see the outer div.

To make the inner div (upper layer) resizable on top of the outer div (lower layer), we need to set resize property to horizontal and overflow property to auto.

Adding the max-width property will stop the inner div (upper layer) going out of the outer div (lower layer).



Most Read

#1 How to check if radio button is checked or not using JavaScript? #2 How to add Read More Read Less Button using JavaScript? #3 Solution to “TypeError: ‘x’ is not iterable” in Angular 9 #4 How to uninstall Cocoapods from the Mac OS? #5 PHP Login System using PDO Part 1: Create User Registration Page #6 How to Use SQL MAX() Function with Dates?

Recently Posted

#Jan 17 4 advanced ways to search Colleague #Jan 16 Colleague UI Basics: The Search Area #Jan 16 Colleague UI Basics: The Context Area #Jan 16 Colleague UI Basics: Accessing the user interface #Jan 14 How to display a student’s individual transcript in Colleague? #Jan 11 How to install PuTTY on a MacOS?
You might also like these
For In Loop in Swift for BeginnersSwift5 Steps to Create a Line using Canvas Tag in HTML5HTMLHow to use $IF operator in Envision Basic?Envision BasicHow to pass arguments in SCSS function?SCSSThe Difference Between the echo and print Commands in PHPPHPHow to set default timezone using PHP?PHPHow to disable the Recovery Mode in WordPress?WordPressHow to get the full URL of current page in PHP?PHPAdvanced nesting in Sass (SCSS) using at-rootSCSSHow to Check If a Variable is an Integer, a Float, a Number, NaN, an Infinite or a Numeric in PHP?PHPIN Operator in PostgreSQLPostgresHow services and dependency injection work in Angular?Angular