Index Thumbnail Title - Difference/Exclusion on Hover

anhtranart · November 27

Site URL: https://www.anhtranart.com/

I am trying to get my Index Thumbnail Titles to show in either Difference or Exclusion for contrast purposes. The titles only reveal on hover. I'm seeing mix-blend-mode is probably part of the solution, but I have no CSS/coding experience so I'm not sure what the correct syntax to target the element is.

anhtranart · November 28

Update, I was able to solve this by using a combo of mix-blend-mode and background-blend-mode!

#projectThumbs .project .project-image img {
  background-blend-mode: difference;
}
#projectThumbs .project .project-title {
  mix-blend-mode: difference;
}

Index Thumbnail Title - Difference/Exclusion on Hover

Recommended Posts

anhtranart

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Popular Days

anhtranart

Create an account or sign in to comment

News

Circle Benefits

Events

Circle Day

Resources

Product Updates

Squarespace Webinars

Hire a Designer

Support

Community

Developers

Resources