My task is quite intricate.
To begin, I have a hidden wrapper div that fades in when the mouse hovers over it and fades out when the mouse moves away. The next step is to include an image div inside the wrapper div. This image div, larger than the wrapper, must overflow its boundaries so that the entire image is visible and also fades in upon hover.
However, I am facing some challenges:
1. The image only overflows to the bottom left corner when hovered over.
2. The image appears when hovering over any area it covers, not just the wrapper area.
Desired result for issue 1: I aim to position the image within the wrapper so that it overflows in all directions. When hovering over the wrapper, I want the image to completely eclipse the wrapper, essentially centering the wrapper within the image.
Desired result for issue 2: I want the fade-in effect to be activated only when hovering over the 20 x 20 wrapper area. Hovering over the area covered by the image should not trigger the effect. On mouse off, the fade-out can start either when leaving the image or the wrapper area.
I could easily use a trick where one image fades out to reveal another, but I need the fade activation location to be within the fading area itself.
Isk
UPDATE:
Resolved issue number 1.
Now, I need to address my second problem to complete the task.
To see my progress visually, visit my website:
Scroll down to the billboard section with the email address, then hover over the black twitter icon to the upper left.
I want the fade-in action to occur only over the twitter Icon area, not the surrounding areas covered by the image. If you toggle the overflow of the wrapper, you'll notice a square area with a yellow border that fades in on hovering over the twitter icon. I want only this square area to activate the hover function, excluding other invisible overflowing content around it.
A non-Javascript solution would be preferred due to coding restrictions, but I am open to trying JS if necessary.
Thanks,
Isk