I have the following code that creates a magnifying glass effect to zoom an image, what I want to achieve is that when the cursor is removed from the image, the magnifying glass remains for a few milliseconds until it disappears.
I tried to apply transition-delay:1s;
but it didn't work.
I am a bit new to CSS. I share my code below
Blessings!
var zoomer = function (){
document.getElementById('img-zoomer-box')
.addEventListener('mousemove', function(e) {
var original = document.getElementById('img1'),
magnified = document.getElementById('img2'),
style = magnified.style,
x = e.pageX - this.offsetLeft,
y = e.pageY - this.offsetTop,
imgWidth = original.width,
imgHeight = original.height,
xperc = ((x/imgWidth) * 100),
yperc = ((y/imgHeight) * 100);
if(x > (.01 * imgWidth)) {
xperc += (.15 * xperc);
};//lets user scroll past right edge of image
if(y >= (.01 * imgHeight)) {
yperc += (.15 * yperc);
};//lets user scroll past bottom edge of image
style.backgroundPositionX = (xperc - 9) + '%';
style.backgroundPositionY = (yperc - 9) + '%';
style.left = (x - 180) + 'px';
style.top = (y - 180) + 'px';
}, false);
}();
body {
margin: 50px;
height: 450px;
overflow: scroll;
font-family: Arial, sans-serif;
color: #333;
background: #f4f4f4;
}
#img-zoomer-box {
width: 500px;
height: auto;
position: relative;
margin-top: 10px;
}
#img1 {
width: 100%;
height: auto;
transition-delay:1s;
}
#img-zoomer-box:hover, #img-zoomer-box:active {
cursor: zoom-in;
display: block;
}
#img-zoomer-box:hover #img2, #img-zoomer-box:active #img2 {
opacity: 1;
}
#img2 {
width: 340px;
height: 340px;
background: url('https://images-assets.nasa.gov/image/iss054e022823/iss054e022823~orig.jpg') no-repeat #FFF;
box-shadow: 0 5px 10px -2px rgba(0,0,0,0.3);
pointer-events: none;
position: absolute;
opacity: 0;
border: 4px solid whitesmoke;
z-index: 99;
border-radius: 100%;
display: block;
transition: opacity .2s;
}
<div>Hover a la imagen para Zoom</div>
<div id="img-zoomer-box">
<img src="https://images-assets.nasa.gov/image/iss054e022823/iss054e022823~orig.jpg" id="img1" />
<div id="img2"></div>
</div>
I think the problem is that the property
transition
is a shorthand property oftransition-property
,transition-duration
,transition-timing-function
andtransition-delay
.For some reason when putting
transition
andtransition-delay
the second was being ignored, so I've split the property into several.But then I have seen that there is an extra problem: it affects showing the magnifying glass and hiding it, causing its appearance to be delayed. The solution is to create two transitions, one in and one out, allowing for different effects and times: