[Support request] How to add zoom effect to images background in Custom post/page grid or list

Home Forums Support [Support request] How to add zoom effect to images background in Custom post/page grid or list

Home Forums Support How to add zoom effect to images background in Custom post/page grid or list

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #1541899
    Sara Genone

    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

    #1542123
    David
    Staff
    Customer Support

    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);
    }
    #1543767
    Sara Genone

    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

    #1543978
    David
    Staff
    Customer Support

    Try adding this CSS:

    .wp-block-getwid-template-post-featured-background-image {
        overflow: hidden;
    }
    #1543983
    Sara Genone

    You are the best WordPress Technical Support man 🙂 !
    It works perfectly
    See you at the next question
    Have a nice day
    sara

    #1544046
    David
    Staff
    Customer Support
Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.