The footer goes up because of pictures

[shaked shechner]

We have this we page 🙁https://rolostack.co.il/עמודי-נחיתה/).
You can see that the footer goes up because of the long pictures.

Is there a way to fix it?
We tried `position:fixed` , but then the footer gets sticky.

we want it to be like that:

Top WordPress Themes with custom widgets feature - Themes4WP

List of the best WordPress Themes with custom widgets feature. Feel free to take a look at our collection of top themes with custom widgets feature.

themes4wp.com

tnx for help

 

[Malcolm]

We have this we page 🙁https://rolostack.co.il/עמודי-נחיתה/).
You can see that the footer goes up because of the long pictures.

Is there a way to fix it?
We tried `position:fixed` , but then the footer gets sticky.

we want it to be like that:

Top WordPress Themes with custom widgets feature - Themes4WP

List of the best WordPress Themes with custom widgets feature. Feel free to take a look at our collection of top themes with custom widgets feature.

themes4wp.com

tnx for help

I see that it is WordPress, have you installed everything correctly, plugins, theme etc?

I have moved this to a better section.

 

[shaked shechner]

I see that it is WordPress, have you installed everything correctly, plugins, theme etc?

I have moved this to a better section.

Yes everything installed correctly....the section with the long pictures we did it in css

 

[Malcolm]

Yes everything installed correctly....the section with the long pictures we did it in css

I'll see if I can look into this. So you added the pictures or was it there before, how did it react without them?

 

[shaked shechner]

I'll see if I can look into this. So you added the pictures or was it there before, how did it react without them?

I added the pictures, but also adding them to the fotter was perfectly fine.
only when i did the effect that when you hover with your mouse the picture goes up then the fotter goes up...

 

[Malcolm]

only when i did the effect that when you hover with your mouse the picture goes up then the fotter goes up...

Perhaps trying reducing how much the picture goes up?

 

[shaked shechner]

Perhaps trying reducing how much the picture goes up?

I don't really understand what do you mean....i can't reducing how much she goes up because whoever enters has to see everything...
If you look at the other site I submitted, you will see that they have long images but they do not reach the bottom

 

[NewsProject]

Post some screenshots. Thanks.

 

[shaked shechner]

I solved this with this:
this for the image wrapper:

selector {

    overflow: hidden;

    height: 400px;

}



and this css on the image:



selector:hover {

    margin-top: 400px;

    transform: translate(0,-100%);

    transition-timing-function: ease;

    transition-duration: 3s;

}

 

[Malcolm]

I don't really understand what do you mean....i can't reducing how much she goes up because whoever enters has to see everything...
If you look at the other site I submitted, you will see that they have long images but they do not reach the bottom

What I mean is how much did you set the image to go up when you hover over it.

I solved this with this:
this for the image wrapper:

selector {
overflow: hidden;
height: 400px;
}

and this css on the image:

selector:hover {
margin-top: 400px;
transform: translate(0,-100%);
transition-timing-function: ease;
transition-duration: 3s;
}

Glad you figured out the problem! Thanks for sharing it as well. Can you please wrap the code in our BBCODE. You can do this by clicking (...) then selecting Code.

 

[Ghost]

Just to let you know, you could have also done it like this with Elementor's custom CSS.

[data-elementor-type='footer']{

bottom:0;

position:absolute;

}

The page you linked still does not show the footer on the bottom for me, so I figured I would share my solution to help 🙂