Individual custom image rollovers

Hi there,
I have 5 columns on my homepage, each contain an image & I’d like to substitute a specific rollover image for each of them.
Here’s an example of how I’d like it to look:
Currently the wording for each is an EPS, but I’m guessing a transparent PNG would be the easiest solution – rather than a SVG(?)
I have seen some info from doing a search, but that seems to be limited to changing all the rollovers – as opposed to a different image for each.
Is there an easy way to add a class to an image so I can target that way, or do I have to grab a unique selector, & if so – which class should I target?

.image-overlay .image-overlay-inside:before {
  background-image: url("overlay.png");
}

So something like the above, except multiple classes giving different image URL’s(?)
Many thanks,
Jason