Ethos archive images

[fransboumans]

Hi there,

I’m trying a couple of things:

1. I want to change the images sizes on the archive page of a category and make the image fit this size
2. I would love to have a zoom in effect on hover (like on the homepage)

Website links

Homepage: https://popcornandstuff.nl/
Category page: https://popcornandstuff.nl/category/dinner/

[Prasant]

Hello @fransboumans,

Thanks for asking.

You login details are not working. Can you please confirm?

Please try out following CSS under X > Theme Options > CSS to have zoom effect:

a.entry-thumb:hover {
    -webkit-transform: scale(1.25);
    -moz-transform:scale(1.25);
    -ms-transform:scale(1.25);
    -o-transform:scale(1.25);
    transform: scale(1.1);
}

a.entry-thumb {
    padding-bottom: 60%;
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -ms-transition: all 1s ease;
    -o-transition: all 1s ease;
    transition: all 1s ease;
}

Can you please elaborate your first question?

Thanks.

[fransboumans]

Hi there,

I just checked the login details, they should be working now.

The CSS didn’t do anything for me.

If you go to the category “Dinner”, you will see that the image is to big (should be the same picture as on the home page (recent posts).

[nabeel]

Hi again,

• To change the image size on archive page, add the following CSS code in the Theme Options > CSS:

.archive .x-iso-container.cols-3 .entry-cover {
    padding-bottom: 60%;
    background-position: 0 0;
}

• For the zoom in effect, Please change the previous CSS with the following code:

.archive .entry-cover:hover {
    -webkit-transform: scale(1.25);
    -moz-transform:scale(1.25);
    -ms-transform:scale(1.25);
    -o-transform:scale(1.25);
    transform: scale(1.1);
}

.archive .entry-cover {
    padding-bottom: 60%;
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -ms-transition: all 1s ease;
    -o-transition: all 1s ease;
    transition: all 1s ease;
}

Cheers!

[fransboumans]

Looks good! Still, when the images scales, the top of the images falls away, it doesn’t expand upwards.

[rad]

Hi there,

Please add this CSS as well,

#x-iso-container {
overflow: visible !important;
}

Hope this helps.

[fransboumans]

That works! Thank you very much!

[rad]

You’re most welcome!