In my current project, I am experimenting with creating a unique 'hovering' link. When the user hovers over an image and then moves the mouse away, I want the link to 'jump' back instead of using jQuery animation.
+-----------+
| I |
| M |
| A | <-- image (acts as a link)
| G |
| E |
+-----------+
___________ <-- shadow effect
So far, I have implemented a CSS hover effect along with a ::after CSS system to create a shadow effect. The intention is to lift the image slightly, shrink the width of the shadow, and lighten the shadow, which somewhat works.
Now, I am attempting to incorporate a JQuery 'Bounce' when the mouse exits the link. Unfortunately, due to conflicts with the CSS transition, the bounce effect doesn't function properly.
Another challenge I face is making the setup dynamic to accommodate different-sized images used as links across the page width. I am currently trying to link the parent's width with the shadow's width, but this approach has some issues in implementation.
After completion, my links may resemble something like this:
+------------+
+-----------+ | |
| | | |
| | | | +---+
| | +---+ | | | |
| | | | | | +---+
+-----------+ +---+ +------------+
_____________ _____ ______________ _
^
|
hovered
This is the current JQuery code I am using:
$(".topMenuImg").mouseout(function () {
$(this).effect("bounce", { times: 3 }, 'normal');
}, function () {
$(this).effect("bounce", { times: 3 }, 'normal');
});
You can view the actual CSS being used here.
Integrating the JQuery is causing disruptions, as seen here.
I welcome any comments, suggestions, or clarifications on this matter.
The following picture demonstrates the current 'hover' effect: