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 refresh a page using PHP at regularly occurring intervals?PHPEssential SQL Commands We Need to KnowSQL/MySQLMicroservices vs Monolithic ArchitectureMiscellaneousWhat’s a Web Storage API in JavaScript?JavaScriptWHERE Clause in PostgresPostgresWordPress Plugin: Things to knowWordPressWhat is the difference between Loosely Typed Language and Strongly Typed Language?MiscellaneousHow to Skip or Exclude a Specific URL or File From .htaccess Rewrite Rule?PHPWordPress: How to change a blog address (URL)?WordPressAngular: Templates, directives, data binding, Services and dependency injectionAngularJavaScript: Methods for HTML DOM classList PropertyJavaScriptSome EASY-to-Understand CSS media query examplesCSS