Simply put: when you click on an image, it will move with a CSS transition. The issue arises when the hover effect of the image persists even after it moves away from under the mouse.
I have an image without a border. Upon clicking, the page zooms in using zoomooz. Hovering over the image reveals a border that stays visible while the page is zoomed in. If you click anywhere on the page, it zooms back out. However, if you click on the image to zoom out and leave the mouse still, the image retains the hover state, keeping the border even when the mouse is not hovering over it.
It's logical that this happens because there is no event triggering the change. I attempted to address this by adding a style change only to the click event, but then there's no animation due to the absence of a CSS transition (
$("img").css("border-color","rgba(0,0,0,0)");)This is my HTML:
<body>
<img src="https://i.imgur.com/e1TsDx0.png" id="abc"/>
</body>
CSS
img {
width: 100px;
border: 1px solid black;
border-color: rgba(0, 0, 0, 0);
margin-left: 10px;
transition: border-color 600ms;
}
img:hover {
border: 1px solid black;
transition:border-color 0s;
}
.zoomedimg {
border-color: rgba(0, 0, 0, 1);
}
Javascript:
$(document).ready(function() {
$("img").click(function(evt) {
event.stopPropagation()
if ($("img").hasClass('zoomedimg')) {
$("img").removeClass('zoomedimg');
$("body").zoomTo();
} else {
$("img").addClass('zoomedimg');
$("img").zoomTo();
}
});
$(window).click(function(evt) {
$("body").zoomTo({});
$("img").removeClass('zoomedimg');
});
});
Closely related to these questions:
How to remove hover state when the element moves This had a very sober answer, which in that example I could not get to work. I did try setting the border color when I clicked the image like in that solution. But then the changing border doesn't count as a transition so it will not animate.
Hover state is maintained during a transition even if the element has gone This had a very extensive answer, but I didn't really understand how to apply it to my situation.
Edit: Junaid Ahmed provided a solution for creating the hover transition using jQuery and a class. When you click to zoom out, removing the "hover" class also removes the border. However, a new issue surfaces:
if you hover over the image while clicking and continue to hover until the zoom out completes, the border disappears and does not return until you mouse out and back over again.
Any suggestions on how to solve this?