Archived topic
Archives / Blog: hover on Entry Title, target Featured Image
5 replies · Started by Vlidi on February 8, 2021
Hi GP team! First of all, thank you for the great software and great support.
I need help with this: I have added a simple zoom-in-on-hover effect on the featured images on the Blog page, similar to the one you suggest here:
https://docs.generatepress.com/article/add-a-zoom-effect-on-hover-to-post-images
For that I have slightly modified the CSS David proposed here:
https://generatepress.com/forums/topic/add-hover-overlay-effect-on-post-image/#post-759357
I would like the effect to work not only when hovering over the image, but also when hovering over the entry title, as most Blog pages do.
I have tried to combine the CSS selectors as Tom proposed in the solution for the similar but different problem here:
https://generatepress.com/forums/topic/mouseover-blog-efect/#post-528215
...but I can't get it to work.
What would be the best way to achieve this?
Thanks!
Hi there,
if hovering on the entire container was needed then it would be fairly simple. ie.
.post-image {
overflow: hidden;
}
.post-image img {
transform: scale(1);
transition: transform 0.35s ease-in;
}
.inside-article:hover .post-image img {
transform: scale(1.2);
}To have it apply only when the Image or Title is hovered, then without using JS you would have to position the Image Below the Title in Customizer > Layout Blog. We can then use a next sibling combinator + to apply the affect.
If you want to move the image below the title, and let me know. I can work out the CSS to do the hover effect and make it so the image is still positioned above the title.
Hey David, thanks so much!
This particular site will have to survive the hover-over-container approach, as I would avoid adding more JS (there is already a console error I am trying to pin down.)
But I would appreciate the CSS solution for another site that uses images below titles (the link in the PI box below).
Thank you!
You can do this:
.post-image {
overflow: hidden;
}
.post-image img {
transform: scale(1);
transition: transform 0.35s ease-in;
}
.post-image:hover img,
.entry-header:hover + .post-image img {
transform: scale(1.2);
}This line:
.entry-header:hover + .post-image img
applies the hover to the entry-header - as it comes immediately before post-image. Thats as good as gets with CSS. Does mean the meta is included in the hover.
Hey David, thanks, this works great for the purpose.
Surely some JS would be a more complete solution, but CSS fills this gap nicely.
Plus, I get to learn about sibling combinators :-)
Thank you for the fantastic support!
You're welcome :)
