Archived topic
How to add zoom effect to images background in Custom post/page grid or list
5 replies · Started by Sara Genone on November 23, 2020
Dear all
I need your help to customize the Custom Post Grid I created width Getwid.
As you can see here https://cospes.socialmela.it/home-2/ I add some css to add zoom effect but I want to be able to zoom on hover only the image background.
Is it possible? Which css I have to add and where ? Could you help me please?
Another issue is about orizontal spacing betweeen columns, I want to remove it, how can I do it with a custom css class?
I hope my requests are clears
Thank you in advance for help
Sara
Hi there,
this really is a question for that plugin developer - maybe they have some settings to do that ?
If not you can try this CSS, which includes the Hover scale effect:
.wp-block-getwid-custom-post-type .wp-block-getwid-custom-post-type__wrapper .wp-block-getwid-custom-post-type__post {
padding: 0;
margin-top: 0;
overflow: hidden;
}
.wp-block-getwid-custom-post-type .wp-block-getwid-custom-post-type__wrapper .wp-block-getwid-custom-post-type__post {
padding: 0;
margin-top: 0;
}
.zoom .wp-block-getwid-template-post-featured-background-image__image {
transform: scale(1);
transition: transform 0.3s ease-in-out;
}
.zoom:hover .wp-block-getwid-template-post-featured-background-image__image {
transition: transform 0.3s ease-in-out;
transform: scale(1.2);
}Thank you David for your code.
It works perfectly :)
I have another request about it: as you can see here https://cospes.socialmela.it/
I setup up some margin between custom pages on the grid, and now the zoom effect on hover the bakground image go outside the border of the singlòe box.. is it possible to avoid this fact?
Thank you in advance for help
sara
Try adding this CSS:
.wp-block-getwid-template-post-featured-background-image {
overflow: hidden;
}You are the best Wordpress Technical Support man :) !
It works perfectly
See you at the next question
Have a nice day
sara
Glad to be of help
