simond simond - 4 months ago 15
CSS Question

css transition opacity fade background

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:

.item-food:hover{
opacity:0.2;
}

.item-fade{
background:black;
opacity: 0.8;
transition: opacity .25s ease-in-out;
-moz-transition: opacity .25s ease-in-out;
-webkit-transition: opacity .25s ease-in-out;
}


See small js fiddle here

Answer

Wrap your image into a SPAN element that has the background: black;

LIVE DEMO

<span class="imgHolder">
   <img src="http://www.theonecar.com/wp-content/uploads/2013/12/aston-martin-db9-153.jpg" style="width:300px;height:auto;" class="hover item-fade" />
</span>

.imgHolder{
    display:inline-block;
    background:#000;
}
.item-fade{
    vertical-align:top;
    opacity: 1;
    transition: opacity .25s ease-in-out;
    -moz-transition: opacity .25s ease-in-out;
    -webkit-transition: opacity .25s ease-in-out;
}
.hover:hover{
    opacity:0.2;
}
Comments