css transition opacity fade background

Question

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    x000D   x000D   hover hover   x000D    opacity  0 2  x000D    x000D   x000D   item-fade   x000D    background  black  x000D    opacity  0 8  x000D    transition  opacity  25s ease-in-out  x000D    -moz-transition  opacity  25s ease-in-out  x000D    -webkit-transition  opacity  25s ease-in-out  x000D    x000D   lt p gt Hover image  the white opacity needs to be black    lt  p gt  x000D   lt img src    placehold it 100x100  class  hover item-fade    gt  x000D   x000D   x000D

User · Accepted Answer

Wrap your image with a span element with a black background   x000D   x000D   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    x000D   lt span class  img-wrapper  gt      lt img class  item-fade  src  http   placehold it 100x100 cf5    gt   lt  span gt  x000D   x000D   x000D

User · Answer

It s not fading to  black transparent  or  white transparent   It s just showing whatever color is  behind  the image  which is not the image s background color - that color is completely hidden by the image   If you want to fade to black ish   you ll need a black container around the image   Something like    ctr       margin  0       padding  0      background-color  black      display  inline-block      and   lt div class  ctr  gt  lt img       gt  lt  div gt

User · Answer

http   jsfiddle net 6xJQq 13   container       display  inline-block      padding  5px    included padding to see background when img apacity is 100        background-color  black      opacity  1      container hover       background-color  red     img       opacity  1     img hover       opacity  0 7      transition       transition  all  25s ease-in-out      -moz-transition  all  25s ease-in-out      -webkit-transition  all  25s  ease-in-out

User · Answer

Please note that the problem is not white color  It is because it is being transparent   When an element is made transparent  all of its child element s opacity  alpha filter in IE 6 7 etc  is changed to the new value    So you cannot say that it is white    You can place an element above it  and change that element s transparency to 1 while changing the image s transparency to  2 or what so ever you want to

[css] css transition opacity fade background

Examples related to css

Examples related to background

Examples related to opacity

Examples related to transition