- This topic has 3 replies, 2 voices, and was last updated 3 years, 4 months ago by
.
-
Posts
-
Hi, can you tell me the CSS to add the exact hover effects on blog posts like https://nerdschalk.com/?
You can check this video (https://www.loom.com/share/3ba4ec2d0d884642b11bdcea5fb7c0bb)
I’ve added my site to private information. I really appreciate any help you can provide.
Customer Support
Hi Pintu,
Yes, we can tell you. You’ll need custom CSS. Try adding this through Appearance > Customize > Additional CSS:
.gb-container.my-article a:hover img { transform:scale(0.97); box-shadow: 0 0 0 4px rgb(0 0 0 / 3%); } .gb-container.my-article a img{ transition: all 0.5s ease; }Hi Fernando,
Thanks a lot, you guys are the reason I love GP.
One slight problem though, the first post (featured post) image is not animating. Can you tell me how to include the first post as well?
Actually, I just used the custom CSS class you have for the other Posts’ Container –
my-article.You can simply just add a different class, say
custom-hover-effect, to the container Blocks holding the images, and change the code to this:.gb-container.custom-hover-effect a:hover img { transform:scale(0.97); box-shadow: 0 0 0 4px rgb(0 0 0 / 3%); } .gb-container.custom-hover-effect a img{ transition: all 0.5s ease; }After you’ve added this code and the class to the Containers, the effect should work.
- You must be logged in to reply to this topic.
