not too sure how to word this question - I have a client looking to replicate this landing page that links two of her websites together:
The triangle in the middle is causing me some issues. The images are set as absolute and change when hovered over. I need to make the triangle an area thats a none state that resets the hover state, the way it does on the grapecreek.com website.
Theres an animation that ill be adding where the triangle grows, and the picture is visible behind it at the beginning. Since the pictures behind the triangle when the mouse is hovering over the triangle the pictures wont change back.
Tried explaining this best I could. Any help would be greatly appreciated, Ive got to have this done as soon as possible.
I think you may have better luck if you create the triangle as a seperate element from the 2 sides.
So the triangle element sits on top of both of them as one triangle, not 2 triangles within each side.
Mite also be worth using an SVG file for the triangle instead of CSS.
I would personally also use background images on div elements instead of actual image elements, will give you a bit more control of their position and size.
HI @BrandonMancini the easier way to reverse engineering is when you open website with DevTools to check how this CSS and HTML was structured and you will find that they did it the way @jonohale suggested.