Sorry if my reply was short, i can explain more ๐
The Imagehover Addon images are all stacked within an "Imagehover region" they are already present on the page, but are hidden from us "invisible" . When a user hovers over a link, the "Class" show
is added to the Imagehover region. The show
class adds some CSS to the Image saying " Dont be invisible anymore, make yourself visible! " and so we see the image. When the user moves off the link, the class show
is removed from the Imagehover region and so too is the CSS that was telling the image to be visible.
It would be best to make use of this action occurring. This show
class being added and then removed. You can take advantage of this for what you are trying to achieve.
If you want there to be a white background with the Images, you don't necessarily have to removed all the text, or make each image have its own fullscreen background container that is white.
Your text with links exists within the "footer-region"
You could say; " When the class show
is added to the Imagehover region -- then make the "footer-region" invisible"
"when the class show
is added to the imagehover-region
then set the footer-region
opacity
to 0
"
By setting your footer (your main content) to an opacity of 0 then to the user it would seem white anyway because your background is white and the text would become completely transparent.
Hope that better explains the process ๐ป
Also, as my footer is set as the menu, I am having some trouble on different screen sizes there are times where I can't see the full menu (it is cut) is there any way to make it fit the screen?
The following Custom CSS for your footer region is causing the issue:
max-height: 100vh !important;
max-width: 100vw !important;
position: fixed;
If the text is set in "pixels" (px) which is a fixed unit then it will likely go over on smaller screens. If the text all added up equals over 700px in height then on screen less that 700px height, it will go over.
You should use a responsive unit so that it resizes based on the screen size. If the text when all added together equals 80% of the screen size in height, then even on a smaller screen it would still try to fit into 80% of the screen height.
You can see how different "Units" apply and their behaviour here:
https://www.w3schools.com/cssref/css_units.asp
best wishes
Richard