Blog Post Thumbnail - B+W to Color Rollover

Site URL: https://www.studiovertime.com/thoughts

Hello!

I'm trying to create a black and white to color rollover for blog post thumbnails (website very much under construction). I'm using this code that I found on another post in this forum:

.no-touch .collection-5d7a891600952e518d49e751 .project-image {
  -webkit-filter: grayscale(100%);
  filter: grayscale(100%);
  &:hover, &:focus {
    -webkit-filter: grayscale(0%);
    filter: grayscale(0%);
  }
}

I've changed .collection...project-image to section[data-section-id="5ec00d59438c273bae2f3262"]. The rollover works, but because the selector is referencing a section (I'm assuming), the effect is applied to all of the blog posts at once instead of the individual blog post thumbnail. It also includes the text, and I don't want the text affected.

Is there a way to do this so that the effect only occurs when rolling over a single blog post at a time? I hope this makes sense!

Thank you!

If you are not doing this now, try using  a Blog summary block page with thumbnails as opposed to the  blog list thumbnails. I know that has worked for folks here.