Creating an absolute element and isn't effected by hovering

hey everyone,

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 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.

thanks in advance.

Hey Brandon!

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.

Couple of uni links that mite help too:

thanks for the quick feedback, ill try it out and keep you updated

1 Like

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.

1 Like