how to setup images move up a little when hoovered

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.

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

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