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 Solution to “TypeError: ‘x’ is not iterable” in Angular 9 #3 How to add Read More Read Less Button using JavaScript? #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

#Aug 15 Is PHP still good for back-end programming? #Aug 10 How to create a multisite network in WordPress? #Aug 3 How to create a circle that follows a cursor using JavaScript and CSS? #Aug 3 How to make a curtain slider using jQuery and CSS? #Aug 2 How to progressively load images and add a blurry placeholder? #Aug 1 How to create a placeholder loader (throbber) using CSS?
You might also like these
How to create a flip pricing table using CSS and JavaScript?CSSHow to Install PHP Laravel on MacOS Catalina?PHPKeyValuePipe in Angular 9AngularHow to Install PHP composer in Mac OS Catalina?PHPURL paths in DrupalDrupalArbitrary Arguments in SCSS functionsSCSSAn Example of Cross-site Scripting (XSS) Attack in PHP and How to Avoid It?PHPHow to create a Horizontal Scroll on button click using JavaScript?JavaScriptHow to avoid element shift on border change while hovering in CSS?CSSHow to apply style only to first child and/or only to children other than the first child?CSSHow to link/add CSS file to HTML Document?CSSSelect statement in Postgres with examplesPostgres