This morning I was tinkering around on my personal blog, wanting some sort of effect to happen when a cursor tracked over the thumbnail images that display on my list style blog (Fairfield template). 

I was able to uncover some CSS for image blocks, gallery blocks, and summary blocks, but none of these affected my blog list images. 

I knew I'd need to find the element name that I was wanting to change, and only a half a cup of coffee into the morning - I wasn't sure I felt like doing that.

Anyway, I figured it out! I wanted to invert my blog thumbnail images upon hover, thinking that would be a neat effect. And it is! 

You can copy and paste the following code into Custom CSS if you use a Squarespace template that allows you to display blog posts as a grid (rather than stacked/list) style. My personal blog uses the Fairfield template, but this should work with any template that offers blog posts to display as a grid. Here is a list of Squarespace templates that feature a grid style blog layout as a built-in feature. 

Here's the code:

/*inverts blog list thumbnail image upon hover*/
.BlogList-item-image:hover {
         filter: invert(100%) !important;
         -webkit-filter: invert(100%) !important;
   }

And here's the rollover effect that code will give you:

You can adjust the percentage to obtain the desired level of inversion. Let me know if you have any questions! :)