topic Different image on hover for blog summary/listing page? in Blog, Website & Page Publishing

Different image on hover for blog summary/listing page?

NicoleT — Fri, 24 Sep 2021 15:13:05 GMT

Trying to establish if this is possible.

My designer wants a different image to display on hover, for the blog listing page. I believe I'd need to add a image field to the post template, but is it possible to reference that image from the summary template?

Re: Different image on hover for blog summary/listing page?

webdew — Mon, 27 Sep 2021 08:22:56 GMT

Hi @NicoleT ,

You can add the style at hover but you cannot add an image field to the post template because the image comes from a featured image tag and we can do it with hard code using JS and advanced CSS but it should be defined on a particular listing.

Hope this helps!

If we were able to answer your query, kindly help the community by marking it as a solution.

Thanks and Regard.

Re: Different image on hover for blog summary/listing page?

NicoleT — Mon, 27 Sep 2021 13:01:21 GMT

Hi @webdew , thanks for your help!

So I could add it as a background image in the CSS file, but I'd need to manually hardcode it for each post essentially?

Re: Different image on hover for blog summary/listing page?

webdew — Tue, 28 Sep 2021 12:54:58 GMT

Hi @NicoleT ,

Yes, you can use background CSS and nth CSS to specify the listing.

For more you can refer this doc-https://www.w3schools.com/cssref/sel_nth-child.asp

Hope this helps!

If we were able to answer your query, kindly help the community by marking it as a solution.

Thanks and Regards.