I am currently in the process of designing a banner for the top of my webpage, but I have yet to come across any code that meets all my requirements. To provide clarification, I have attached an illustration showcasing what I am aiming to achieve.
1) The concept involves having 4 buttons (each as an image file), two on each side with a default image positioned in the center. This represents the main/inactive state.
All buttons should exhibit similar animations when hovered over. For the purpose of this query, I have only depicted two of the buttons.
2) Upon hovering over Box 1 (located at the top left corner), the button would undergo a change while text and lines slide out from left to right. Furthermore, the center image would also be altered. Additionally, as an added challenge, the left button and the center image would be hyperlinked to Page 1. Once the cursor moves away, the text slides back to the left, and the image reverts to its default state mentioned in point A. Similarly, the blue box follows this behavior pattern, linking to Page 2 upon interaction.
3) In a comparable fashion, hover over Box 4 (situated at the bottom right corner) would result in the button changing alongside the emergence of text and lines sliding from right to left. Subsequently, the center image would experience a transformation. As part of this interactive feature, the right button and the center image would link to Page 4. Post-hover, the textual content shifts to the right, and the image reverts to its default state as outlined in point A. Likewise, the green box functions similarly by linking to Page 3.
The closest solution I have come across is illustrated here: jQuery image slide on hover effect (horizontal). My thought process revolves around utilizing the static images from point A as a background image while potentially creating a transparent sprite featuring solely the active version of the hovered button and center image to slide either left or right during interactions.
My understanding leads me to believe that the above-mentioned example could work effectively for Boxes 1 and 3 (top left and right), simulating the effect of lines sliding out as the image transitions in either direction. However, I remain uncertain about how to implement this strategy for Boxes 2 and 4.
Is my direction correct, or am I demanding more than what jQuery can offer? While I would not mind sacrificing animated text (instead incorporating them into the hover images), it is vital that both the buttons and center image change upon being hovered over and are able to redirect users to specific webpages.