Archived topic
Generatepress post image effet
5 replies · Started by Shane on March 25, 2022
Hi,
I would like to have the zoom-in effect on the images at the individual post level.
I have implemented the following code:
-
.post-image {
position: relative;
overflow: hidden;
}
.post-image img {
max-width: 100%;
-moz-transition: all 0.3s;
-webkit-transition: all 0.3s;
transition: all 0.3s;
}
.post-image:hover img {
-moz-transform: scale(1.2);
-webkit-transform: scale(1.2);
transform: scale(1.2);
}
-
The issue is that the code seems to only affect the archive pages (i.e., not the homepage thumbnails, and not the post images in the individual post.)
Why is that? And, what should I do?
Thanks.
Hi Shane,
You’ll need to modify the selectors of this CSS code to include the other images.
For instance, with regards to the link you provided:
.post-image, .featured-image {
position: relative;
overflow: hidden;
}
.post-image img, .featured-image img {
max-width: 100%;
-moz-transition: all 0.3s;
-webkit-transition: all 0.3s;
transition: all 0.3s;
}
.post-image:hover img, .featured-image:hover img {
-moz-transform: scale(1.2);
-webkit-transform: scale(1.2);
transform: scale(1.2);
}With regards to the other images, it would be best to add them inside a container, and set a custom CSS class for all the containers having images.
For instance, zoom-container: https://share.getcloudapp.com/5zuLwZWP
Now, your total code would be:
.post-image, .featured-image, .zoom-container{
position: relative;
overflow: hidden;
}
.post-image img, .featured-image img, .zoom-container img {
max-width: 100%;
-moz-transition: all 0.3s;
-webkit-transition: all 0.3s;
transition: all 0.3s;
}
.post-image:hover img, .featured-image:hover img, .zoom-container:hover img {
-moz-transform: scale(1.2);
-webkit-transform: scale(1.2);
transform: scale(1.2);
}Make sure the image fits the container 100%.
Here is something you may refer to with regards to getting the correct selector: https://amasty.com/knowledge-base/product-labels-find-css-selector.html
Hope this helps. :)
Thanks for the update. I just implemented the code. But, instead of the post images in the content, the zoom-in effect impacted only the featured images.
What do I need to do to zoom in NOT on the featured images but only on the content images?
If that’s the case, here is something you may try:
.post-image, .wp-block-image, .zoom-container{
position: relative;
overflow: hidden;
}
.post-image img, .wp-block-image img, .zoom-container img {
max-width: 100%;
-moz-transition: all 0.3s;
-webkit-transition: all 0.3s;
transition: all 0.3s;
}
.post-image:hover img, .wp-block-image:hover img, .zoom-container:hover img {
-moz-transform: scale(1.2);
-webkit-transform: scale(1.2);
transform: scale(1.2);
}This would target WordPress Image Blocks.
Hope this helps. :)
Hi Fernando, this works. Thank you!
You’re welcome Shane! Glad to be of assistance! Feel free to reach out anytime if you’ll need assistance with anything else. :)
