Colour overlay on hover with css - .png image

Question

I'm trying to create a colour overlay on hover effect for my website. I'm displaying clients/customers. (like so: http://www.squarespace.com/customers/ ) - but I'd like to change it specifically to a blue overlay, not reduce the images opacity.

Here's where I've got thus far

https://jsfiddle.net/gavinfriel/d98sv4cy/

I'm wondering is there an easy way to do this with css - like using a colour mask so that covers the png logo only. I've been reading about the overflow: hidden; property but am not sure how to implement it.

Your help would be appreciated, and I sincerely hope this is possible!! (Thank you to those who have answered already)

I'm developing the website using Squarespace to css solutions would be appreciated as opposed to jquery/javascript.

Answer 1

I'd use transitions, they are widely supported now. This is based on the code you've provided:

.icon div:hover {
    opacity: .5;
    transition: opacity .5s ease-out;
    -moz-transition: opacity .5s ease-out;
    -webkit-transition: opacity .5s ease-out;
    -o-transition: opacity .5s ease-out;
}

Answer 2

this should do the trick, use opacity and transition https://jsfiddle.net/d98sv4cy/1/

.icon:hover {
    opacity: .33;
    transition-property: opacity;
    transition-duration: .2s;
    transition-timing-function: ease-in-out;
}

Answer 3

CSS混合模式是否值得考虑？