On my webpage, I have a grid of hidden images that fade in when the mouse hovers over them. The code for this functionality is as follows:
HTML
<img class="Image" src="./img/foo.png">
CSS
.Image {
opacity: 0;
}
JS
$(".CircleImage").hover(
function() {
$(this).fadeTo(0,1); // mouseenter
},
function() {
$(this).fadeTo(200,0); // mouseleave
}
);
Now, I want to incorporate links on top of these images while still maintaining their hover behavior. The challenge arises when the link text spans across multiple images and dynamically adjusts in size based on window size.
For instance, if a link says "click me" with "cli" over one image and "me" over another, I want the corresponding image to appear when hovering over each part of the text, allowing the link to remain clickable.
In essence, I want the hover effect to trigger not only for the topmost element but also for elements beneath it.
If anyone has suggestions on how to achieve this, please share your insights!