Переход от затемненного изображения к не затемненному на мыши с помощью CSS/Javascript?

Question

я пытаюсь получить обратный эффект этого кода (jsfiddle-demo):

a.darken { 
    display: inline-block; 
    background: black; 
    padding: 0; 
} 

a.darken img { 
    display: block; 

    -webkit-transition: all 0.5s linear; 
    -moz-transition: all 0.5s linear; 
    -ms-transition: all 0.5s linear; 
    -o-transition: all 0.5s linear; 
    transition: all 0.5s linear; 
} 

a.darken:hover img { 
    opacity: 0.7;  
} 

div.hoverText{display = none;} 

Я имею в виду, я хочу HTML кода где затемненные его изображения и darkeness исчезает «наведение мыши» -с переход.

Answer 1

Вы просто должны инвертировать непрозрачности значения :)
(«базовый» фон должен иметь непрозрачность < 1, а «: зависли» фон должен иметь непрозрачность = 1)
Вот развилка вас скрипку: http://jsfiddle.net/m1mcb66h/

a.darken img { 
    [...] 
    opacity: 0.7; 
} 
a.darken:hover img { 
    opacity: 1; 
} 

Answer 2

Я думаю, что это следует сделать трюк

вместо

opacity:0.7; 

написать

filter: contrast(150%); 

Answer 3

Я предполагаю, что ваш .html выглядит следующим образом:

<a class='darken'><img src='image1.jpg'></a> 
<a class='darken'><img src='image2.jpg'></a> 

Я решил так:

a.darken { 
    display: inline-block; 
    background: black; 
    padding: 0; 
} 

a.darken img{ 
    display: block; 

    -webkit-transition: all 0.5s linear; 
    -moz-transition: all 0.5s linear; 
    -ms-transition: all 0.5s linear; 
    -o-transition: all 0.5s linear; 
    transition: all 0.5s linear; 
} 

a.darken:hover img{ 
    opacity: 0.7; 
} 

div.hoverText{display = none;} 

Ваш последний pseudoclass прекрасно работает также, как это:

a.darken img:hover{ 
    opacity: 0.7; 
} 

Пожалуйста, предоставьте .html для будущих вопросов.