Experience the powerful AI writing right inside WordPress
Show stunning before-and-after transformations with image sliders.
Improve user engagement by showing estimated reading time.
Written by Mahmuda Akter Isha
Showcase Designs Using Before After Slider.
An image comparison slider CodePen example is one of the easiest ways to test, customize, and preview a before-after image slider before adding it to a real website. Whether you are comparing a design makeover, product improvement, photo retouching, real estate renovation, fitness transformation, medical result, or UI redesign, a before-after slider helps visitors see the difference instantly.
Instead of showing two images separately, an image comparison slider places both images in the same frame and lets users drag a handle to reveal the “before” and “after” versions. This makes the comparison more interactive, more visual, and more convincing.
In this guide, you will learn how to create a responsive before after image slider in CodePen using HTML, CSS, and JavaScript. You will also get complete copy-paste code, mobile support tips, common troubleshooting fixes, WordPress implementation guidance, and best practices for using image comparison sliders on real websites.
An image comparison slider is an interactive web component that displays two images on top of each other. A draggable line, handle, or range control lets the user reveal more or less of one image to compare it with the other.
It is also commonly called:
The idea is simple: the first image shows the original state, and the second image shows the changed or improved state. As users drag the slider handle, they can visually compare the difference in real time.
This type of slider is especially useful when the difference between two images is the main message of the content.
A normal image gallery can show multiple images, but it does not always make the difference obvious. Users have to look back and forth between two separate visuals. An image comparison slider solves that problem by placing the two images in the same visual space.
Here are the main benefits:
Before-after sliders help users understand visual changes quickly. This is useful for design updates, restorations, editing work, product changes, website redesigns, and service-based results.
A static image is passive, but a slider is interactive. Users can drag the handle, explore the difference, and spend more time with the content.
For businesses, before-after comparisons can prove results visually. Instead of only saying that a service works, you can show the transformation.
Image comparison sliders are useful for:
A clean, responsive before-after slider can make a website feel more modern and interactive without requiring a complicated design.
CodePen is a popular platform for testing front-end code. It lets you write HTML, CSS, and JavaScript in separate panels and preview the result instantly.
For an image comparison slider, CodePen is useful because you can quickly test:
If you are searching for an image comparison slider CodePen example, you probably want a working demo that you can copy, edit, and customize. That is exactly what this tutorial covers.
Before writing the code, let’s understand the basic structure of the slider.
A simple image comparison slider needs five main parts:
The before image stays visible in the background. The after image is placed over it. Then CSS controls how much of the after image is visible. JavaScript updates that visible area when the user drags the slider.
The result is a smooth before-after comparison effect.
Follow these steps to create a responsive before-after image slider in CodePen.
Go to CodePen and create a new Pen. You will see three panels:
You will place the structure in the HTML panel, the styling in the CSS panel, and the interaction logic in the JavaScript panel.
This makes it easy to test each part separately.
The HTML structure is simple. You need a wrapper, two images, a divider line, a handle, and a range input.
The range input is a good option because it works well on desktop and mobile. It also makes the slider easier to control compared to fully custom mouse-only dragging.
Here is the HTML:
<div class="comparison-wrapper"> <div class="image-comparison" id="imageComparison"> <img src="before-image.jpg" alt="Before image" class="comparison-image before-image" > <img src="after-image.jpg" alt="After image" class="comparison-image after-image" id="afterImage" > <div class="comparison-line" id="comparisonLine"></div> <div class="comparison-handle" id="comparisonHandle"> <span></span> <span></span> </div> <input type="range" min="0" max="100" value="50" class="comparison-range" id="comparisonRange" aria-label="Image comparison slider" > </div> </div>
Replace before-image.jpg and after-image.jpg with your own image URLs.
before-image.jpg
after-image.jpg
For the best result, both images should have the same width, height, and subject position. If the images are different sizes, the comparison may look misaligned.
The CSS controls the layout, image positioning, handle style, and reveal effect.
Here is the CSS:
* { box-sizing: border-box; } body { margin: 0; padding: 40px 20px; font-family: Arial, sans-serif; background: #f5f5f5; } .comparison-wrapper { max-width: 900px; margin: 0 auto; } .image-comparison { position: relative; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 16px; background: #ddd; box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15); } .comparison-image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; user-select: none; pointer-events: none; } .before-image { z-index: 1; } .after-image { z-index: 2; clip-path: inset(0 50% 0 0); } .comparison-line { position: absolute; top: 0; bottom: 0; left: 50%; width: 4px; background: #ffffff; z-index: 3; transform: translateX(-50%); pointer-events: none; } .comparison-handle { position: absolute; top: 50%; left: 50%; width: 54px; height: 54px; border: 4px solid #ffffff; border-radius: 50%; background: rgba(0, 0, 0, 0.35); z-index: 4; transform: translate(-50%, -50%); display: flex; align-items: center; justify-content: center; gap: 6px; pointer-events: none; } .comparison-handle span { display: block; width: 8px; height: 8px; border-top: 3px solid #ffffff; border-left: 3px solid #ffffff; } .comparison-handle span:first-child { transform: rotate(-45deg); } .comparison-handle span:last-child { transform: rotate(135deg); } .comparison-range { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: ew-resize; z-index: 5; } @media (max-width: 768px) { body { padding: 24px 12px; } .image-comparison { border-radius: 12px; } .comparison-handle { width: 44px; height: 44px; border-width: 3px; } .comparison-line { width: 3px; } }
This CSS uses clip-path to reveal part of the after image. The after image is placed over the before image, and only a portion of it is visible depending on the slider value.
clip-path
Now add the JavaScript that updates the visible portion of the after image.
const comparisonRange = document.getElementById("comparisonRange"); const afterImage = document.getElementById("afterImage"); const comparisonLine = document.getElementById("comparisonLine"); const comparisonHandle = document.getElementById("comparisonHandle"); comparisonRange.addEventListener("input", function () { const sliderValue = comparisonRange.value; afterImage.style.clipPath = `inset(0 ${100 - sliderValue}% 0 0)`; comparisonLine.style.left = `${sliderValue}%`; comparisonHandle.style.left = `${sliderValue}%`; });
This code listens for changes in the range input. When the user moves the slider, the code updates:
This creates the before-after reveal effect.
Here is the full copy-paste version. You can add the HTML, CSS, and JavaScript into the correct CodePen panels.
The slider works by layering two images inside one container.
The before image is placed at the bottom. The after image is placed above it. Then the after image is clipped using CSS. When the slider value changes, JavaScript updates the clip-path value.
For example:
clip-path: inset(0 50% 0 0);
This means the right side of the after image is hidden by 50%. So only the left half of the after image is visible.
When the range value increases, more of the after image becomes visible. When the range value decreases, less of the after image is shown.
The divider line and handle are also moved based on the same range value, so everything stays visually aligned.
clip
Some older image comparison slider examples use the CSS clip property. However, modern CSS examples should use clip-path instead.
The clip-path method is more flexible and easier to understand for image reveal effects. It also works well with responsive layouts when used properly.
For a before-after slider, this line is the key:
The values inside inset() control how much of the image is hidden from the top, right, bottom, and left.
inset()
For a horizontal image comparison slider, the right value changes as the user drags the slider.
A responsive image comparison slider should automatically adjust to different screen sizes. This is important because many visitors will interact with your website on mobile devices.
To make the slider responsive, the code above uses:
width: 100%; aspect-ratio: 16 / 9; object-fit: cover;
Here is what each property does:
width: 100%
aspect-ratio: 16 / 9
object-fit: cover
You can change the aspect ratio depending on your image type.
For square images, use:
aspect-ratio: 1 / 1;
For portrait images, use:
aspect-ratio: 4 / 5;
For wide banners, use:
aspect-ratio: 21 / 9;
The most important rule is this: both images should have the same dimensions or the same visual framing. If one image is zoomed in and the other is zoomed out, the slider will not compare them properly.
The example in this tutorial uses an HTML range input, which works naturally on many devices, including mobile and tablet screens.
This is one reason a range input is a good choice for beginners. You do not need to write separate mouse and touch event logic.
For a custom drag-based slider, you may need to handle:
But for most basic before-after image slider CodePen examples, an input range slider is simpler, cleaner, and easier to maintain.
The example above uses plain JavaScript, also called vanilla JavaScript. That means it does not require jQuery, React, Vue, or any external JavaScript library.
This is useful because:
A vanilla JavaScript image comparison slider is a good option when you only need one or two sliders on a static page.
However, if you are creating multiple sliders across a WordPress site, a plugin can be easier because it gives you reusable controls, styling options, shortcode support, and a more beginner-friendly setup.
Many users search for a CSS image comparison slider or CSS only before after slider. A CSS-only version is possible for simple hover effects, but it is not always ideal.
For example, you can create a hover-based image reveal using CSS. But a real draggable comparison slider usually needs JavaScript or an input range control to update the reveal position dynamically.
CSS-only sliders can be useful for:
But for real websites, JavaScript or a WordPress plugin is usually better because users expect smooth dragging, mobile support, and reliable behavior.
Using input type="range" is one of the cleanest ways to create a before-after slider.
input type="range"
Benefits of using a range input include:
The range input in this tutorial is invisible, but it sits above the slider. When users drag across the slider, they are actually moving the range input. The JavaScript reads the range value and updates the visible part of the after image.
This approach is simple but powerful.
Most before-after sliders move from left to right. But you can also create a vertical image comparison slider where users drag from top to bottom.
A vertical image comparison slider is useful for:
For a vertical version, the main idea is to change the clip-path direction.
Instead of this:
You would use something like this:
clip-path: inset(0 0 50% 0);
This hides part of the image from the bottom instead of the right side.
However, the slider handle and input behavior also need to be adjusted. For most use cases, a horizontal image comparison slider is easier and more familiar for users.
Even a simple image comparison slider can break if the images, CSS, or JavaScript are not set up correctly. Here are the most common issues and how to fix them.
If your image comparison slider is not working in CodePen, check these things first:
position: absolute
position: relative
For example, if your HTML uses:
id="afterImage"
Your JavaScript must also use:
document.getElementById("afterImage");
If the ID names do not match, the slider will not update.
If the image changes but the handle does not move, check this part of the JavaScript:
comparisonHandle.style.left = `${sliderValue}%`;
Also check that the handle has absolute positioning:
.comparison-handle { position: absolute; left: 50%; }
The handle needs position: absolute so it can move inside the slider container.
If the before and after images appear side by side instead of overlapping, the CSS positioning is probably missing.
Make sure both images have:
position: absolute; inset: 0; width: 100%; height: 100%;
Also make sure the parent container has:
position: relative; overflow: hidden;
Without these properties, the images will not stack properly.
If the after image looks stretched, check the image dimensions and CSS.
Use:
object-fit: cover;
Also try to use two images with the same size. For example:
If one image is portrait and the other is landscape, the comparison will not look clean.
If the slider does not work on mobile, use the range input method shown in this tutorial. It works better on touch devices than mouse-only JavaScript.
Also make sure the range input covers the full slider:
.comparison-range { position: absolute; inset: 0; width: 100%; height: 100%; }
This allows users to drag anywhere across the slider area.
If the slider does not resize properly, use a responsive wrapper.
Add:
.comparison-wrapper { max-width: 900px; margin: 0 auto; } .image-comparison { width: 100%; aspect-ratio: 16 / 9; }
This makes the slider responsive while keeping the image ratio consistent.
If your CodePen embed is not showing in WordPress, check whether your editor allows iframe or embed code. Some WordPress setups may block certain embed scripts depending on user role, theme settings, or security plugins.
You can also try:
For production WordPress pages, a plugin is usually easier than embedding a CodePen demo.
There are different ways to add an image comparison slider to a website. The best method depends on your goal.
If you are only learning or testing, CodePen is a great option. If you are building a custom website, HTML, CSS, and JavaScript may be enough. But if you are using WordPress and want a faster setup, a dedicated before-after image slider plugin is often the better choice.
There are three common ways to add an image comparison slider to WordPress.
If you already created a slider in CodePen, you can embed it into a WordPress page or post.
Basic steps:
This method is good for tutorials, demos, and developer blogs. However, it may not be ideal for a live business website because you are depending on an external embed.
You can also add your own slider code manually to WordPress.
This method may require:
This gives you more control, but it can be difficult for non-technical users. You also need to make sure your code does not conflict with your theme or other plugins.
If you want a no-code solution, using a WordPress plugin is usually the easiest option.
For example, WP Before After Image Slider can help you create before-after image comparisons directly inside WordPress without manually writing HTML, CSS, and JavaScript every time.
This is useful for:
Instead of building every slider from scratch, you can create sliders from the WordPress dashboard and reuse them across your website.
CodePen is great for testing. But a WordPress plugin is better when you need to use image comparison sliders regularly on your live site.
Use a plugin if:
Use CodePen or custom code if:
Both options are useful. The best choice depends on whether you are learning, testing, or building a production website.
A before-after image slider can improve user experience, but only if it is designed properly. Follow these best practices to get better results.
The before and after images should have the same width and height. If they are different sizes, the comparison may look broken.
For example, use:
This keeps both images aligned.
The subject should appear in the same place in both images. If the angle or position changes too much, users may struggle to compare the difference.
This is especially important for:
Large images can slow down your website. Before uploading images, compress them and use modern formats when possible.
Good image optimization can improve:
Try to keep your images visually clear but not unnecessarily large.
Alt text helps search engines and accessibility tools understand your image.
Instead of using generic alt text like:
image slider
Use descriptive alt text like:
Before and after image comparison slider showing website redesign result
This gives more context and can help your content appear for relevant searches.
A large number of visitors browse websites from mobile devices. Your before-after image slider should work smoothly on smaller screens.
Make sure:
Image comparison sliders can be interactive and useful, but adding too many sliders to one page may slow down performance.
If you need to show many comparisons, consider:
Labels are optional, but they can help users understand the comparison faster.
You can add simple labels like:
Keep labels short and easy to read.
Before publishing the slider on a live website, test it in common browsers such as:
This helps you find layout or interaction issues before users experience them.
Image comparison sliders can be used in many types of websites. Here are some practical examples.
A web design agency can use a before-after slider to show old website designs compared with redesigned versions. This helps potential clients understand the improvement in layout, branding, readability, and user experience.
Photo editors can use an image comparison slider to show original photos compared with edited versions. This is useful for retouching, color correction, background removal, and restoration services.
Real estate businesses can show property transformations before and after renovation. This works well for interior redesign, exterior upgrades, landscaping, and staging.
Online stores can use image comparison sliders to show product improvements, material differences, color changes, or upgraded versions.
Beauty clinics, salons, and skincare brands can use before-after sliders to show visible transformations. However, it is important to use honest images and avoid misleading edits.
Software companies can use image comparison sliders to show dashboard updates, feature redesigns, and interface improvements.
An image comparison slider CodePen example is a great way to learn how before-after sliders work and test your own design before using it on a live website. With simple HTML, CSS, and JavaScript, you can create a responsive slider that lets users drag a handle and compare two images interactively.
In this tutorial, we covered how to build a before-after image slider in CodePen, how the code works, how to make it responsive, how to fix common issues, and how to add the same type of slider to WordPress.
If you are a developer, the custom CodePen method gives you full control. But if you are using WordPress and want a faster no-code solution, a plugin like WP Before After Image Slider can help you create beautiful image comparisons without manually writing code every time.
Whether you are building a portfolio, product comparison, renovation showcase, design case study, or visual transformation page, an image comparison slider can make your content more engaging, more interactive, and easier to understand.
An image comparison slider CodePen is a live front-end demo that shows how to create a before-after image slider using HTML, CSS, and JavaScript inside CodePen. Users can preview the slider, edit the code, and customize it for their own projects.
To create a before-after image slider in CodePen, add the HTML structure for two images, style them with CSS so they overlap, and use JavaScript to control how much of the after image is visible. You can use a range input to make the slider easier to drag on desktop and mobile.
A basic hover-based image comparison effect can be created with CSS only, but a real draggable slider usually needs JavaScript or an input range control. For better interaction and mobile support, HTML, CSS, and JavaScript together are the better choice.
Yes. A range input is a simple and effective way to control an image comparison slider. It works well for beginners because it reduces the need for complicated mouse and touch event handling.
Use a responsive container with width: 100%, set a consistent aspect-ratio, and use object-fit: cover for the images. Also make sure both before and after images have the same dimensions.
aspect-ratio
The most common reasons are incorrect image URLs, mismatched ID names, missing JavaScript, missing position: relative on the parent container, or missing position: absolute on the images. Check your HTML, CSS, and JavaScript carefully.
If the slider handle is not moving, make sure your JavaScript updates the handle’s left position when the range value changes. Also make sure the handle has position: absolute.
left
Yes, you can embed a CodePen image comparison slider in WordPress using a Custom HTML block. However, for a live WordPress site, a dedicated before-after image slider plugin is often easier and more reliable.
Use custom code if you are a developer and want full control. Use a WordPress plugin if you want a no-code solution, faster setup, reusable sliders, and easier management from the WordPress dashboard.
There is no single required size, but both images should have the same dimensions. A common size is 1200 × 675 pixels for a 16:9 layout. The most important thing is that both images align properly.
Yes, you can create a vertical image comparison slider by changing the clip-path direction and adjusting the handle movement. Instead of revealing the image from left to right, you reveal it from top to bottom.
They can affect page speed if the images are too large or if you use too many sliders on one page. To avoid performance issues, compress images, use modern formats, and avoid loading unnecessary sliders.
This page was last edited on 30 June 2026, at 5:43 pm
Your email address will not be published. Required fields are marked *
Comment *
Name *
Email *
Website
Save my name, email, and website in this browser for the next time I comment.
How many people work in your company?Less than 1010-5050-250250+
By proceeding, you agree to our Privacy Policy