Сделать непрозрачность с помощью перехода css3 для каждого изображения отдельно

Я хочу изменить непрозрачность при наведении курсора для каждого изображения отдельно, используя переход CSS3.

Вот код:

<div id="gallary">
     <img src="images/1.jpg"/>
     <img src="images/1.jpg"/>
     <img src="images/1.jpg"/>
     <img src="images/1.jpg"/>
     <img src="images/1.jpg"/>
     <img src="images/1.jpg"/>
     <img src="images/1.jpg"/>
</div>

и вот CSS:

#gallary img{
    opacity:1;
    transition:all 1s ease-in-out;
    -webkit-transition:all 1s ease-in;
}

#gallary:hover img{
    opacity:.5;
}

Селектор возникает для всех изображений внутри div с идентификатором «галерея». Как я могу изменить непрозрачность для каждого изображения отдельно при наведении курсора мыши?

Вот пример: http://jsfiddle.net/TJeHX/


css css-transitions
person palAlaa    schedule 03.08.2012    source источник

Ответы (1)


arrow_upward
6
arrow_downward 

#gallary:hover img {

->

#gallary img:hover {

Ваше текущее определение изменяет непрозрачность всего контейнера «галерея» и, следовательно, для всех изображений.

person kirilloid    schedule 03.08.2012