[Support request] how to setup images move up a little when hoovered

Home Forums Support [Support request] how to setup images move up a little when hoovered

Home Forums Support how to setup images move up a little when hoovered

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #1651090
    PING Yao

    Hi there,
    I woudl like to add some image effects which is like
    https://generateblocks.com/

    4 images which are below “Performance in its DNA Built to outperform the competition.”

    when I move mouse on images, it will just move up a little bit.
    Would you please tell me how to setup this kids of effects?

    thanks
    Best Regards,
    Henry Huang

    #1651133
    Elvin
    Staff
    Customer Support

    Hi,

    That particular effect is from this CSS:

    .gb-container-c1d96137:hover {
        transform: translate3d(0,-5px,0);
    }

    But you can reuse this on any element as long as you use the proper selector.

    Say for example, you have an image with a class “move-on-hover”.

    You can use the class as a selector to make it move on hover.

    Example CSS:

    .move-on-hover {
        transition: all .5s ease;
    }
    .move-on-hover:hover {
        transform: translate3d(0,-5px,0);
    }

    tranform: is the actual effect and transition: is for animation easing.

    #1651157
    PING Yao

    Hi Elvin,
    thanks for your detailed solutions.

    (Question 1)
    If I wanna only photos on a specific page, where I need to put this CSS code?

    (Question 2)
    If I wanna have all photos have this effects, what I need to do is to copy this css code on simple css. Am I right?

    thanks
    Best Regards,
    Henry Hunag

    #1651178
    Elvin
    Staff
    Customer Support

    (Question 1)
    If I wanna only photos on a specific page, where I need to put this CSS code?

    You can use a Hook Element and wrap your CSS like this – <style>.samplecss{...}</style> – and place it on the code area. You then hook it to wp_head and set its display rule to the specific page you want it applied on.

    (Question 2)
    If I wanna have all photos have this effects, what I need to do is to copy this css code on simple css. Am I right?

    If you want ALL images within the page, you can simple use img as the selector.

    Example:

    img {
        transition: all .5s ease;
    }
    img:hover {
        transform: translate3d(0,-5px,0);
    }

    If you want it to apply only on the images in the main content, try this one:

    .entry-content img {
        transition: all .5s ease;
    }
    .entry-content img:hover {
        transform: translate3d(0,-5px,0);
    }

    But this won’t work if the img element is wrapped with a container that has overflow: hidden property. Else, it should be fine.

Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.