I want my images to double in size when clicked, and return to normal size when clicked again. What's working: I successfully add the "unzoomed" class to the correct images. When the images are clicked, they have the "unzoomed" class removed and the "zoomed" class added to them, and they double in size. When I click them again, nothing happens.
You can view the problem here. Just click on any of the images.
Here is my HTML:
<figure>
<img src="./images/certcentral/certcentral01.png" class="image-outline">
<figcaption>Fig. 1: The certification experience.</figcaption>
</figure>
Here is my CSS:
figure img {
margin-left: 0px;
max-width: 400px;
transition: transform .4s;
}
.unzoomed:hover {
cursor: zoom-in;
}
.zoomed {
transform: scale(2);
}
.zoomed:hover {
cursor: zoom-out;
}
Here is my jQuery:
<script>
$(document).ready(function(){
$("figure img").addClass("unzoomed");
$("figure img.unzoomed").click(function(){
$(this).addClass("zoomed").removeClass("unzoomed");
});
$("figure img.zoomed").click(function(){
$(this).addClass("unzoomed").removeClass("zoomed");
});
});
</script>