How to use CSS to create an image overlay effect? - css

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);

Answer 3

Easiest approach would be to have the text and tools over a transparent background, and change the background color on hover. No opacity or other such. To make it work without "!important" define the background with background-image, and the color, position, and repeat likewise separately. Or, define the background-color with important (it's ok, it's prescriptive).

Answer 4

Put the image's initial opacity to .2, then put it to full opacity on hover.
.btnImg {
width: 100px;
height: 100px;
display: inline-block;
border: 1px solid #e4e4e4;
opacity: .2;
}
.btnImg:hover {
opacity: 1;
background-color: #878787;
}
#btnImgConfig {
background: url("http://www.icecub.nl/images/config.png") no-repeat scroll 0 0 transparent;
}
<a class="btnImg" id="btnImgConfig" href="#"></a>

Answer 5

What you show in the desired result is not really possible in the current setup..
If you are able to use a png24 file with a transparent background, you can accomplish this more easily, by just changing the background color.
#btnImgConfig {
background-image: url("https://cdn4.iconfinder.com/data/icons/ios7-line/512/Tools.png");
background-size:100%;
background-color: #eee;
}
.btnImg {
width:100px;
height:100px;
display:inline-block;
border:1px solid #e4e4e4;
}
#btnImgConfig.btnImg:hover {
background-color: #ddd;
}
See https://jsfiddle.net/zgurL5t9/ for an example.

Answer 6

Your image has a default background color which is causing this issue. try using a transparent PNG image instead along with the background-color property and you should be good to go.
I have updated your Fiddle link slightly for your reference:
JSfiddle
#btnImgConfig {
background: url("http://www.jar2exe.com/sites/default/files/images/pics/config-100.png") no-repeat scroll 0 0 #f8f8f8;
}
#btnImgConfig:hover{
background-color: #878787;
}
Note: I have used a different image of same size to make it easier for you.

Answer 7

Assuming you use a transparent png here.
You could create a different element within your a href.
<a id="btnImgConfig" href="#"><span class="btnImg"></span></a>
Keep the image on the link, but the background-color on the new element.
This way the opacity doesn't change the original background-img
CSS could be something like this.
.btnImg {
width:100px;
height:100px;
border:1px solid #e4e4e4;
position: absolute;
}
.btnImg:hover {
opacity: .2;
background-color: #878787;
}
#btnImgConfig {
background: url("http://www.icecub.nl/images/config.png") no-repeat scroll 0 0 transparent;
width:100px;
height:100px;
display: block;
}