Archived topic
div shows on hover but underneath footer
6 replies · Started by Gerhard on May 26, 2022
Hello,
I'm trying to have the following nice hover effect:
https://galerie-b2.com/kunstler/
But position: absolute in my css is not accepted.
How can I have the img underneath of my list?
Greetings from Cologne
Gerhard
Hi Gerhard,
Here’s a CSS you may try adding in Appearance > Customize > Additional CSS:
li.year a {
position: relative;
z-index: 2000;
}
.site-footer.grid-container.footer-bar-active.footer-bar-align-left {
position: relative;
}
Then, edit the z-index: -2 in your current code for .chrono div.chrono-bild to 0:
Hope this helps!
Thank you, Fernando!
It's better now - but the footer is still beneath my list.
What if I wrote in my css
.site-footer.grid-container.footer-bar-active.footer-bar-align-left
{
position:fixed;
width: 100%;
bottom: 0vh;
}
Greetings from Cologne
Gerhard
Hi there,
if you want to move the footer to the bottom of the screen then you can do this:
.site-footer {
position: fixed !important;
width: 100%;
left: 0;
bottom: 0;
}
That's great.
Thank you once again, David!
Greetings from Cologne
Gerhard
Glad we could be of help
Hello,
2 issues:
1. how can I adjust the width of the div which shows on hover to the grid-container's width (1600px)?
2. Now in my smartphone the list goes on top of the header and footer?!
Greetings from Cologne
Gerhard