Home Web Design CSS CSS Image Comparison Slider With JavaScript | Reveal Image On Hover

CSS Image Comparison Slider With JavaScript | Reveal Image On Hover

May 31, 2019

6995

How we can create a comparison slider in Pure JavaScript HTML CSS, without jQuery? Solution: Simple CSS Image Comparison Slider With JavaScript, Reveal image on hover. In other words, run slider on mouse over.

Maybe you have seen many creative and good image comparison slider before. Most of those are built with jQuery, not is pure JavaScript. I know with jQuery we can create amazing stuff easily but you must have to learn do in with javascript first.

If you want to create a basic one with only using JavaScript, then this post is for you. Because of today, I will teach you how you can create a basic comparison slider with JavaScript HTML & CSS. So, Today I am sharing CSS Image Comparison Slider With JavaScript. In short, Reveal the second image on hovering the first image.

This is a very simple image comparison program with HTML, CSS, and JavaScript. I had created this using CSS transform, width, and margin command. It is very easy to understand If you a beginner then you can also understand this easily. You can also modify the divider angel after changes some property.

If you are thinking now, How the program actually is which I am talking about. Then see the preview given below.

Preview Of JavaScript Compare Two Images

See this video preview for getting an idea of how this program looks like.

https://webdevtrick.com/wp-content/uploads/javascript-image-compare.mp4?_=1

Now you can see this visually. If you like this, then get the source code of its.

CSS Image Comparison Slider Source Code

Before sharing source code, Let’s talk about the program. As you know this is a pure HTML JavaScript & CSS Image Comparison Slider on hover program. This program is based on CSS width and margin property. I also used transform property but put 0 degrees. If you change the value of transform then you can create the divider slant.

And using JavaScript, I had put an image on top. Then I used JS addEventListener (get info) command with mousemove value. That increases the second image’s width and put it on top.

For creating this program you have to create 3 files. First for HTML, second for CSS, and third for JavaScript. Follow the steps to create this without any error.

index.html

Create an HTML file named ‘index.html‘ and put these codes given here below.

<!DOCTYPE html>
<!-- code by webdevtrick ( https://webdevtrick.com ) -->
<html>

<head>
  <meta charset="UTF-8">
  <title>JavaScript Image Comparition | Webdevtrick.com</title>
      <link rel="stylesheet" href="style.css">
</head>

<body>
 <div class="main">
  <div class="imagesection" id="imagesection">
  <div class="imagea firstimg">
    <div class="final-image">
      <img src="https://images.pexels.com/photos/672142/pexels-photo-672142.jpeg">
    </div>
  </div>
  <div class="imagea secondimg">
    <div class="final-image">
      <img src="https://images.pexels.com/photos/219938/pexels-photo-219938.jpeg">
    </div>
  </div>
</div>
	 
 </div>
    <script  src="function.js"></script>

</body>

</html>

<!DOCTYPE html>

<html>

<head>

<title>JavaScript Image Comparition | Webdevtrick.com</title>

</head>

<body>

</div>

</div>

</body>

</html>

style.css

Create a CSS file named ‘style.css‘ and put these codes.

/** code by webdevtrick ( https://webdevtrick.com ) **/
.main {
  width: 900px;
}
body .imagesection {
  position: relative;
  width: 100%;
  height: 800px;
  overflow: hidden;
}
body .imagea {
  position: absolute;
  overflow: hidden;
}
body .imagea.secondimg .final-image {
  transform: skew(0deg);
  margin-left: 900px;
}
body .imagea.secondimg {
  transform: skew(0deg);
  margin-left: -900px;
  width: calc(50vw + 900px);
}
body .imagea .final-image {
  height: 600px;
}
body .imagea img {
  width: 900px;
}

/** code by webdevtrick ( https://webdevtrick.com ) **/

.main {

width: 900px;

}

body .imagesection {

position: relative;

width: 100%;

height: 800px;

overflow: hidden;

}

body .imagea {

position: absolute;

overflow: hidden;

}

body .imagea.secondimg .final-image {

transform: skew(0deg);

margin-left: 900px;

}

body .imagea.secondimg {

transform: skew(0deg);

margin-left: -900px;

width: calc(50vw + 900px);

}

body .imagea .final-image {

height: 600px;

}

body .imagea img {

width: 900px;

}

function.js

The final step, create a JavaScript file named ‘function.js‘ and put the codes.

/** code by webdevtrick ( https://webdevtrick.com ) **/
document.addEventListener('DOMContentLoaded', function(){
    let banner = document.getElementById('imagesection');
    let devLayer = banner.querySelector('.secondimg');
    let delta = 0;

    banner.addEventListener('mousemove', function(e){
        delta = (e.clientX - window.innerWidth / 2) * 0.5;
        devLayer.style.width = e.clientX + 1000 + delta + 'px';
    });
})

/** code by webdevtrick ( https://webdevtrick.com ) **/

document.addEventListener('DOMContentLoaded', function(){

let banner = document.getElementById('imagesection');

let devLayer = banner.querySelector('.secondimg');

let delta = 0;

banner.addEventListener('mousemove', function(e){

delta = (e.clientX - window.innerWidth / 2) * 0.5;

devLayer.style.width = e.clientX + 1000 + delta + 'px';

});

})

That’s It. Now you have successfully created CSS Image Comparison Slider With JavaScript, Divide and Reveal the second Image On Hover. If you have any doubt or question comment down below.

Thanks For Visiting, Keep Visiting.