css transition opacity fade background

css background opacity transition
simon picture simon · Jan 15, 2014 · Viewed 233.2k times · Source

I am doing a transition where it fades into transparent white, when a user is hovering an image.

My problem is that I need to change the color, that it fades to, to black. I have tried just simply adding background:black; to the class that contains the transition, but it does not work unfurtunately, it's still fading into white transparent.

The css code I am using is:

Answer

Roko C. Buljan picture Roko C. Buljan · Jan 15, 2014

Wrap your image with a span element with a black background.

.img-wrapper {
  display: inline-block;
  background: #000;
}

.item-fade {
  vertical-align: top;
  transition: opacity 0.3s;
  -webkit-transition: opacity 0.3s;
  opacity: 1;
}

.item-fade:hover {
  opacity: 0.2;
}
<span class="img-wrapper">
   <img class="item-fade" src="http://placehold.it/100x100/cf5" />
</span>

Related questions

How to change the background colour's opacity in CSS

I have a PNG file which I give a background colour to its transparent areas, but I would like to make the background colour a bit transparent, like opacity. Here is my code so far: social img{ opacity:0.5; } .social img:…

Read More
How can I make my website's background transparent without making the content (images & text) transparent too?

I'm doing a website for a school project, and I'm currently having a small problem... I can't make the body's background transparent without it also affecting the content in it. Here's my HTML code: <html> <head> &…

Read More
Stretch and scale a CSS image in the background - with CSS only

I want that my background image stretch and scale depending on the browser viewport size. I've seen some questions on Stack Overflow that do the job, like Stretch and scale CSS background for example. It works well, but I want …

Read More