How to achieve image change on hover?
So, I'm trying to achieve the effect as such on this site .
(Near the bottom where you can hover over the image and it shows another when you move it)
Any ideas? I mean, I know they are just overlaying two images, but how do they display the far image using CSS / Javascript on hover? It is outside of me. I tried to reproduce it myself with no success.
source to share
Try the following:
var main = document.querySelector('.main');
var one = document.querySelector('.one');
var two = document.querySelector('.two');
main.onmousemove = function (e) {
var width = e.pageX - e.currentTarget.offsetLeft;
one.style.width = width + "px";
two.style.left = width + "px";
}
.main {
width: 200px;
height: 200px;
overflow: hidden;
position: relative;
}
.one {
background-image: url('http://www.lorempixel.com/200/200');
width: 50%;
height: 100%;
}
.two {
background-image: url('http://www.lorempixel.com/200/200/sports');
position: absolute;
left: 50%;
right: 0px;
top: 0px;
bottom: 0px;
background-position: right;
}
<div class="main">
<div class="one"></div>
<div class="two"></div>
</div>
source to share
So what happens when the mouse hovers over the line, the width changes dynamically, if you inspect the element, you can see that as well.
Now, in the DOM structure, the brown car, the one that's hidden, is in front of the top image. To achieve this, you can fully position the brown car, so it goes right behind the next image, and with javascript or jQuery adds a listener for the hover, image, or whatever centerline is used on the site that will change the width of the top image (silver) in relation to to the position of the mouse in the image block.
Basically, the width of the background image should change as a percentage by how far the mouse is to the left of the DIV, for example, if the mouse is in the middle, the width should be 50%.
Here are the js they use for this, straight from their site (I have it uncompressed)
var ImageSlider = ImageSlider || {};
ImageSlider.Public = function(t) {
"use strict";
var e = t(".image-compare-tool"),
i = t(".image-compare-images"),
o = t(".image-compare-top img"),
a = (t(".image-compare-bottom img"), function(e) {
e.preventDefault();
var i, o = t(this).find(".image-compare-top"),
a = t(this).find(".image-compare-bottom img")[0],
n = a.getBoundingClientRect();
i = "mousemove" == e.originalEvent.type ? (e.pageX - n.left) / a.offsetWidth * 100 : (e.originalEvent.touches[0].pageX - n.left) / a.offsetWidth * 100, 100 >= i && o.css({
width: i + "%"
})
}),
n = function() {
i.each(function() {
t(this).on("mousemove", a), t(this).on("touchstart", a), t(this).on("touchmove", a)
})
},
m = function() {
o.each(function() {
var e = t(this).attr("src"),
i = t(this).parent();
i.css("background-image", "url(" + e + ")")
})
},
c = function() {
n(), m()
},
r = function() {
e.length > 0 && c()
};
r()}(jQuery);
source to share
If you look at the html sources (Ctr + Shift + i in Chrome) you can see this element
<div class="image-compare-tool ICT-theverge">
<div class="image-compare-images">
<div class="image-compare-bottom"><img src="http://cdn2.vox-cdn.com/uploads/chorus_asset/file/2455624/khyzyl-saleem-plain-copylow.0.jpg"></div>
<div class="image-compare-top" style="width: 6.158357771261%; background-image: url(http://cdn0.vox-cdn.com/uploads/chorus_asset/file/2455620/khyzyl-saleem-plain-copylow1.0.jpeg);"><img src="http://cdn0.vox-cdn.com/uploads/chorus_asset/file/2455620/khyzyl-saleem-plain-copylow1.0.jpeg"></div>
</div>
</div>
So here are the pictures! So, you need to take a look at the css.
.image-compare-tool
{
max-width:100%;
width:100%;
z-index:999;
margin:0 auto 1.5em 0;
}
.image-compare-images
{
font-size:0;
position:relative;
height:100%;
-ms-touch-action:none;
-webkit-touch-callout:none;
-webkit-user-select:none;
}
.image-compare-images:hover
{
cursor:col-resize;
}
.image-compare-images img
{
display:block;
height:auto;
width:100%;
}
.image-compare-top,.image-compare-bottom
{
z-index:0;
height:100%;
}
.image-compare-top
{
background-size:cover;
height:100%;
left:0;
position:absolute;
top:0;
width:50%;
}
.image-compare-top:after
{
background-color:#fff;
content:'';
height:50px;
left:calc(100%-5px);
top:calc(50%-25px);
position:absolute;
width:10px;
}
.image-compare-top img
{
display:none;
}
.ICT-SBNation .image-compare-top:after
{
background-color:#c52126;
}
.ICT-SBNation .image-compare-top:before
{
background-color:#c52126;
content:'';
height:100%;
left:calc(100%-2.5px);
top:0;
position:absolute;
width:5px;
}
.ICT-TheVerge .image-compare-top:after
{
background-color:#fa4b2a;
}
.ICT-TheVerge .image-compare-top:before
{
background-color:#fa4b2a;
content:'';
height:100%;
left:calc(100%-2.5px);
top:0;
position:absolute;
width:5px;
}
.ICT-Polygon .image-compare-top:after
{
background-color:#ff0052;
}
.ICT-Polygon .image-compare-top:before
{
background-color:#ff0052;
content:'';
height:100%;
left:calc(100%-2.5px);
top:0;
position:absolute;
width:5px;
}
.image-compare-top:before,.ICT-Vox .image-compare-top:before
{
background-color:#fff;
content:'';
height:100%;
left:calc(100%-2.5px);
top:0;
position:absolute;
width:5px;
}
Here wea! You can accomplish the same things just by including css and creating the same html structure and classes with just changing img tracks ...
And finally the js that I brazenly stole from the above answer:
var ImageSlider = ImageSlider || {};
ImageSlider.Public = function (t) {
"use strict";
var e = t(".image-compare-tool"),
i = t(".image-compare-images"),
o = t(".image-compare-top img"),
a = (t(".image-compare-bottom img"), function (e) {
e.preventDefault();
var i, o = t(this).find(".image-compare-top"),
a = t(this).find(".image-compare-bottom img")[0],
n = a.getBoundingClientRect();
i = "mousemove" == e.originalEvent.type ? (e.pageX - n.left) / a.offsetWidth * 100 : (e.originalEvent.touches[0].pageX - n.left) / a.offsetWidth * 100, 100 >= i && o.css({
width: i + "%"
})
}),
n = function () {
i.each(function () {
t(this).on("mousemove", a), t(this).on("touchstart", a), t(this).on("touchmove", a)
})
},
m = function () {
o.each(function () {
var e = t(this).attr("src"),
i = t(this).parent();
i.css("background-image", "url(" + e + ")")
})
},
c = function () {
n(), m()
},
r = function () {
e.length > 0 && c()
};
r()
}(jQuery);
And a working JSFiddle: http://jsfiddle.net/9gf59k00/
And my luck ...
source to share
You can do it without javascript, JSfiddle - http://jsfiddle.net/k4915wwm/
Just...
div:hover {
background:url("newImage.jpg");
}
source to share