css переход opacity fade background

Question

Я делаю переход, где он исчезает в прозрачном белом, когда пользователь наводит изображение. Моя «проблема» в том, что мне нужно изменить цвет, который он исчезает, до черного. Я попробовал просто добавить фон: черный; к классу, который содержит переход, но он не работает, но он все еще исчезает в прозрачном белом.

код CSS я использую это:

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

Итоговое изображение в SPAN элемент, который имеет background: black;

.imgHolder{ 
 
    display: inline-block; 
 
    background: #000; 
 
} 
 
.item-fade{ 
 
    vertical-align: top; 
 
    opacity: 1; 
 
    transition: opacity 0.3s; 
 
    -webkit-transition: opacity 0.3s; 
 
} 
 
.item-fade:hover{ 
 
    opacity: 0.2; 
 
}

<span class="imgHolder"> 
 
    <img class="item-fade" src="http://placehold.it/100x100/cf5" /> 
 
</span>

Answer 2

Пожалуйста, обратите внимание, что проблема не white цвета. Это потому, что оно прозрачно.

Когда элемент становится прозрачным, непрозрачность его дочернего элемента; альфа-фильтр в IE 6 7 и т. д., изменяется на новое значение.

Таким образом, вы не можете сказать, что он белый!

Вы можете поместить элемент над ним и изменить прозрачность этого элемента на 1, изменив прозрачность изображения на .2 или что бы вы ни пожелали.

Answer 3

Это не угасание в "черный прозрачный" или "белый прозрачный". Это просто показывает, какой цвет находится «позади» изображения, то есть не цвет фона изображения - этот цвет полностью скрыт от изображения.

Если вы хотите похудеть на черном (ish), вам понадобится черный контейнер вокруг изображения. Что-то вроде:

.ctr { 
    margin: 0; 
    padding: 0; 
    background-color: black; 
    display: inline-block; 
} 

и

<div class="ctr"><img ... /></div> 

Answer 4

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 

}