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