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 Solution to the error “Visual Studio Code can’t be opened because Apple cannot check it for malicious software” #2 How to add Read More Read Less Button using JavaScript? #3 How to check if radio button is checked or not using JavaScript? #4 Solution to “TypeError: ‘x’ is not iterable” in Angular 9 #5 How to uninstall Cocoapods from the Mac OS? #6 PHP Login System using PDO Part 1: Create User Registration Page

Recently Posted

#Apr 8 JSON.stringify() in JavaScript #Apr 7 Middleware in NextJS #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
You might also like these
How to Use ROLLUP Operator in SQL and MySQL?SQL/MySQLHow to Use SQL MAX() Function with Dates?SQL/MySQLHow to select multiple values in React dropdown?ReactHow to get the height and width of an element using JavaScript?JavaScriptCONCAT and CONCAT_WS Functions in PostgresPostgresHow to remove a specific item from an array in JavaScript?JavaScriptHow to create bouncing balls using HTML canvas and JavaScript?HTMLWordPress: How to loop through ACF group fields?WordPressCan We Use For Loop to Loop Through Associative Arrays in PHP?PHPKilling A Project Part 2: Who should make the decision to kill a project?MiscellaneousAngular 9 time clock update every minute, second, hourAngularShould we ever delete data from a database?Miscellaneous