Hover Effect on image (change to solid color)

Hi!
I am trying to add a hover effect to the likeable image in my site. I found to code below, and it is working. Hovever -i would like to have a color tone instead of alpha filter. 
Is it possible? Do you have a code to share with me?

// hover image //
a:link img {
 opacity: 1.0;
 filter: alpha(opacity=100); /* For IE8 and earlier */
}

a:hover img {
 opacity: 0.6;
 filter: alpha(opacity=90);
  
  /* For IE8 and earlier */
}

Try the codepen on this page:

https://css-tricks.com/almanac/properties/f/filter/

Thanks for the codepen. I used opacity and add a shape with color under the image. and work perfect. However, this filter affect the logo in the header. But I don't want the effect in the logo, only the linkable block images in the body. 
is it a way to remove the effect from the logos?

4 minutes ago, rociolopez said:

is it a way to remove the effect from the logos?

Yes, but you'll have to share the code you used, and either add or tweak your classes.