How to use CSS to create an image overlay effect?

Question

I've designed some hyperlinks with CSS to add a background image (to make it look like a button) using the following code:
<a class="btnImg" id="btnImgConfig" href="#"></a>

.btnImg {
    width:100px;
    height:100px;
    display:inline-block;
    border:1px solid #e4e4e4;
}

.btnImg:hover {
    opacity: .2;
    background-color: #878787;
}

#btnImgConfig {
    background: url("http://www.icecub.nl/images/config.png") no-repeat scroll 0 0 transparent;
}

As you can see, I'm trying to create a darker effect on the image on hover. This is the desired effect:



However, currently the effect is this:



I know I could easily do this by replacing the image on hover with a darker version of it. But somehow I feel this shouldn't be the way to do it in this case. Besides what is mentioned above, I've also tried rgba{..} on hover. This however had no effect at all.

Here's a JSFiddle of the code above.

Answer 1

You could alternatively use a pseudo-element which then overlays. This will give you the effect you require.

.btnImg {
  width: 100px;
  height: 100px;
  display: inline-block;
  border: 1px solid #e4e4e4;
  position: relative;
}
.btnImg:hover::after {
  background-color: #878787;
  opacity: 0.4;
  position: absolute;
  content: '';
  width: 100%;
  height: 100%;
}
#btnImgConfig {
  background: url("http://www.icecub.nl/images/config.png") no-repeat scroll 0 0 transparent;
}

<a class="btnImg" id="btnImgConfig" href="#"></a>

Answer 2

Try this:

Change opacity: .2;to -webkit-filter: brightness(0.5);