This is throwing me for a loop. Thanks for any help you can provide.
Here is a link to the site: https://preview.webflow.com/preview/askergo?preview=e8bb5716111925346efe28ae99ebfcf1
Ill describe the outcome I am looking for, and the complications that have prevented me from moving forward.
The page I am working on is the "Tools" page. My intentions are to have a very very simple clean page with product names and "+" symbols next to their titles.
Upon hovering I am attempting to have the following occur:
- A "ghost" or highly transparent image of the product fades in to take up the entire background.
- The "+" symbol rotates clockwise 90-120 degrees
- Additional information on the product slides out and that information appearing causes anything below to simply slide down a little to make room.
I am not to far away, but I am beginning to guess to much and its creating some mess which is why I am reaching out. Currently...
The first product name is showing as 1 line in the back end, but when viewing the site it shows as 2 lines of text and I am unsure as to why. Once you hover it moves to one line of text.
Their is no fade in or drop in effect for the text on the initial transition. However, the 2nd transition and all future transitions do have the proper fade in drop in effect.
When the hidden text loads it does not move the content below it, so it ends up behind the 2nd products title.
Lastly, the big background image is not loading on hover.
I should also mention, these sections will all need to be links as each one will open a page for the product.
Thank you very much for any help you can provide!