[Support request] div shows on hover but underneath footer

[Gerhard]

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

[Fernando]

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!

[Gerhard]

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

[David]

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;
}

[Gerhard]

That’s great.

Thank you once again, David!

Greetings from Cologne
Gerhard

[David]

Glad we could be of help

[Gerhard]

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

[Author]

Posts