Осветление изображения с использованием стилей или Javascript

Question

Я хотел бы украсить изображение на моей веб-странице при наведении курсора, используя CSS или Javascript. Я видел несколько примеров использования непрозрачности и фильтров в стилях, но они мне не подходят.

Заранее спасибо

CP

Answer 1

[UPDATE]

Чистым решением CSS было бы использование фильтров CSS :

img:hover {
    filter: brightness(1.5);
}

Здесь мы добавляем 50% яркости ко всем изображениям при наведении.

---

Почему бы и нет? Вы всегда можете установить фон родительского контейнера на #fff (белый), а затем уменьшить непрозрачность изображения.

HTML:

<div class="white">
    <img src="image.jpg" alt="Image" />
</div>

CSS:

.white { background: #fff; }
img:hover {
    opacity: 0.5;
    filter: alpha(opacity=50);
}

Другое решение заключается в использовании библиотеки JavaScript, такой как Pixastic .

Answer 2

Вы можете использовать спрайты CSS. Создайте 2 версии изображения: одну обычную, одну яркую и объедините их в 1 изображение с помощью Photoshop или любого другого приложения.

Здесь есть хорошее объяснение того, что такое CSS-спрайты .

Конечно, это не то, что вы могли бы использовать на своем сайте. Например, это, вероятно, не то, что вы хотели бы использовать на больших изображениях (они бы удвоились в размере). Вы также не можете сделать это таким образом, если изображения, которые вы хотите сделать ярче, приходят из внешних источников или загружаются, например, пользователями. Это будет хорошо работать для таких вещей, как изображения на панели навигации и другие элементы пользовательского интерфейса.

Answer 3

Я бы использовал что-то подобное:

  filter: alpha(opacity=80);
  opacity: 0.8;

Насколько я знаю, это единственный способ сделать это в CSS. Это то, что вы после?