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

[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

[Elvin]

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.

[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

[Elvin]

(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.

[Author]

Posts