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">

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 PHP Login System using PDO Part 1: Create User Registration Page #6 How to uninstall Cocoapods from the Mac OS?

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
The SELECT DISTINCT Statement in SQLSQL/MySQLHow to create a flip pricing table using CSS and JavaScript?CSSSELF JOIN in PostgresPostgresFilling a button background from left to right using CSSCSSHow to pass arguments in SCSS function?SCSSHow to add Google Static Map using ACF map field?WordPressuser_can vs current_user_can in WordPressWordPressHow to hide a DIV on clicks outside of it using jQuery?jQueryHow to use @each rule with key-value pair in SCSS?SCSSHow to add a ribbon inside a container using CSS?CSSHow to zoom an element on hover using CSS?CSSINNER JOIN in PostgresPostgres