Яркость изображения от темного до светлого при наведении

Question

Я ищу какой-нибудь сценарий, который выделит все изображения на странице в определенном классе div.class, наложит на него прозрачную черную тень, а затем затухнет при наведении курсора. Кто-нибудь знает о системе сделать это? Я не могу реально изменить сам сайт (http://cargocollective.com/maureengriswold), иначе я бы уже нашел какой-то дурацкий способ сделать это.

Answer 1

Обычно вы делаете это, помещая черный фон за вашими изображениями и устанавливая непрозрачность изображений на некоторое значение <1. </p>

На вашем сайте вы добавляете следующий CSS:

.cardimgcrop {
    background-color: black;
    border-color: white;
}

.cardimgcrop img {
    opacity: 0.7;
}

.cardimgcrop img:hover {
    opacity: 1;
}

ОБНОВЛЕНИЕ:

Если вы хотите анимированное замирание, вы бы пропустили определение CSS :hover и добавили следующие строки Javascript (используя jQuery 1.4.2, который уже используется на вашем сайте):

$(document).delegate('.cardimgcrop img', 'mouseover', function() {
   $(this).fadeTo(500, 1);
});
$(document).delegate('.cardimgcrop img', 'mouseout', function() {
   $(this).fadeTo(500, 0.7);
});

Конечно, вместо этого вы могли бы также использовать собственные переходы CSS для этого эффекта (как предложено в ответ Говарда ), но вам необходимо позаботиться о возможностях браузера.

Answer 2

Не совсем уверен, что вы подразумеваете под прозрачной черной тенью, но я думаю, что вы имеете в виду эффект, похожий на завесу над ним, который поднимается при наведении и возвращает при наведении мыши?

Вы, вероятно, можете достичь этого эффекта полностью используя css.Примерно так:

DIV.myClass{
  -moz-transition-property: background-color;
  -moz-transition-duration: 2s;
  background-color: rgba(0,0,0,0.6);
}
DIV.myClass:hover{
  -moz-transition-property: background-color;
  -moz-transition-duration: 2s;
  background-color: rgba(255,255,255,1);

Вы захотите поиграть с точным CSS, чтобы достичь желаемого эффекта, а также вы захотите протестировать в различных браузерах, поскольку поддержка переходов CSS не на 100%..

Подробнее о CSS-переходах можно прочитать на сайте документации MDN.

Answer 3

CSS-фильтры - еще одна опция http://html5 -demos.appspot.com / static / css / filters / index.html