Popup layer to appear behind a sticky Nav bar

[Initiostar]

Acorn,

Thanks, my mistake, should have removed all Siran code from the first example: https://initiostar.co.uk/demo/CSS-Reveal/

Gary

[Kirst]

Hi Gary,

Thank you very much for the help. I had a look at your method and everything seems to be working but the top main logo. I had a look at the example you sent and if you drag the logo down to make it larger it falls behind the bar cutting off the logo.

I have attached the link below. Please could you advise me on how to get the main logo to appear in front of that white bar. I hope this makes sense after you have a look at the demo.

https://swanplastics.co.za/demo/products

Many thanks.

[Acorn]

Hi Gary,
Thank you very much for the help. I had a look at your method and everything seems to be working but the top main logo. I had a look at the example you sent and if you drag the logo down to make it larger it falls behind the bar cutting off the logo.
I have attached the link below. Please could you advise me on how to get the main logo to appear in front of that white bar. I hope this makes sense after you have a look at the demo.
https://swanplastics.co.za/demo/products
Many thanks.

Kirst, it is unfair on any TGer to expect them to delve into CODE that your XDA has produced and try and guess how your created your design.
If you do want help, please provide a design example in XAR/WEB format because that it what someone else have to do for you otherwise.

Do also note 3 other TGers have contributed already.
It is courtesy to thank them too and describe why you have not followed these other suggestions.

The point of Forum engagement should be to find a solution that others can benefit from so your feedback and ideas are really quite important.

Acorn

[Initiostar]

OK relatively easy to include the demo XAR:CSS Reveal Same Layer.xar || https://initiostar.co.uk/demo/CSS-Reveal/. This should help with your construction. Check the heights of the logos and bars - make sure everything is in the correct layer order too.

Gary

[Kirst]

Hi Acorn,

I am fairly new to this platform and still trying to work my way around it. It was not my intention to discredit anyone's efforts on purpose. Thanks to everyone that has contributed.

Noted for next time.

Thanks.

[Acorn]

To summarise Initiostar's approach:

• Anything non-sticky that moves will appear under a Stick at Top (SaT) shape.
• Anything Sticky appears above all other shapes.
• Sticky and SaT shapes still follow a Layer order - highest is on top.
• Initial shapes showing at the top of the page simply scroll off.
• Shapes that that are SaT are in place or move to the top
• The bottom-most SaT shape is a blocker that hides all moving shapes go under it, out of sight.
• A MouseOver shape is always shown as the top-most shape (even over a SaT).

The solution is not to have a MouseOver reveal but to code such that the reveal all occurs on the MouseOff Layer.

@Initiostar, you have a spurious dot following the <script> Tag that is stopping the animation effect.

Acorn

[Initiostar]

Thank you Acorn,

I have removed the "." in the script and thank you for the excellent explanation. All I've done is to demonstrate Siran's code/ approach for the OP with an example in post#4 and to the same using your reveal idea in my current example.

Both great ideas.

Gary

[Kirst]

Hi everyone,

Thank you very much for the help. I have managed to get it working. I used Gary's concept but not the code. I did try the code, I couldn't get it right but got the just of what the code is meant to do.

I added the code as shown below:

<style>
.product-image:hover { opacity:0;}
</style>

I then named each image htmlclass="product-image" and added the hover images behind the images I named.
This allowed for the main image to fade to no opacity to reveal the image behind it (hover image).

Thank again for all the help.