CODEWITHSUNDEEP
css
icecub
icecub

Reputation: 8773

How to use CSS to create an image overlay effect?

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:

Desired hover effect

However, currently the effect is this:

Current hover effect

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.

Upvotes: 4

Views: 224

Answers (7)

Robin
Robin

Reputation: 11

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

Upvotes: 1

Aalok Mishra
Aalok Mishra

Reputation: 196

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.

Upvotes: 2

Jeroen W
Jeroen W

Reputation: 872

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.

Upvotes: 2

Wes Foster
Wes Foster

Reputation: 8900

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>

Upvotes: 2

Stewartside
Stewartside

Reputation: 20905

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>

Upvotes: 4

Vlad Pintea
Vlad Pintea

Reputation: 853

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

Upvotes: 2

questhat23
questhat23

Reputation: 128

Try this:

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

Upvotes: 2

Related Questions