Different image on hover for blog summary/listing page?

SOLVE
NicoleT
Participant

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?

 

 

0 Upvotes
1 Accepted solution

Accepted Solutions
webdew
Solution
Top Contributor | Diamond Partner

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.

View solution in original post

4 Replies 4
webdew
Solution
Top Contributor | Diamond Partner

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.

View solution in original post

NicoleT
Participant

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? 

0 Upvotes
webdew
Top Contributor | Diamond Partner

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.

AFevic
Member

The main reason is occurs when I try to publish the content on the page Please guide me how can I fix this error?

0 Upvotes