Css осветление фона при наведении

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

Я хотел бы скрасить изображение на моей веб-странице при наведении курсора мыши с помощью css или javascript. Я видел несколько примеров, используя непрозрачность и фильтры в стилях, но они, похоже, не работают для меня. Заранее спасибо CP

3 ответа

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

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

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

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

Я понимаю, что CSS

Я получаю фильтр ошибок не является известным именем свойства CSS Непрозрачность не является известным именем свойства CSS

Я слишком медленный Вы можете получить эту ошибку, так как я не думаю, что это действительный CSS. Я не могу вспомнить почему. Но если это работает, это работает. Кого волнует, подтверждает ли это.

IE6 не поддерживает класс: hover psudeo для других элементов, кроме якорей. Вы можете обойти это, повернув изображение на якорь или используя JavaScript для добавления / удаления класса, когда пользователь наводит курсор на изображение.

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

Хорошее объяснение того, что CSS спрайты здесь.

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

Источник

Затемнение картинки или осветление, при наведении на нее.

Но он работает для всех картинок, а мне надо для некоторых баннеров. Пытался сделать через div , но не получилось. Что подскажете?

Затемнение картинки при наведении
Приветствую! Есть код ‘Затемнение картинки при наведении’ img:hover < opacity:0.7; /* FF.

Изменение картинки при наведении на нее курсора мыши
Задание : Нужно в таблицу поместить картинку , размер ячейки 30*30 к примеру. При наведении на нее.

Изменение размера картинки при наведении на нее курсора
Здравствуйте. Подскажите как сделать изменение размера картинки (в моем случае фото) при.

Затемнение фона при наведении на ссылку
Всем здравствуйте! Смотрите, есть ссылка: <a href="http://site.ru">site</a> как.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18

.adv img{ text-align: center; padding-top: 5px; padding-bottom: 5px; opacity:0.8; -moz-opacity:0.8; filter: alpha(opacity=80) black; -khtml-opacity: 0.8; background-color:#000; } .adv img :hover { opacity:1; -moz-opacity:1; filter: alpha(opacity=100) black; -khtml-opacity: 1; background-color:#000; }

Сообщение от metamarfoz

Между ними пробел не нужен!

Сообщение от metamarfoz

Сообщение от metamarfoz

1. сейчас посмотрим
2.это описка на этом форуме
3. да, Html код

Добавлено через 1 минуту
Все, заработало, спасибо вам.

Добавлено через 1 час 11 минут
Теперь новая проблема:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22

.adv { text-align: center; padding-top: 5px; padding-bottom: 5px; } .adv img{ padding-top: 5px; padding-bottom: 5px; opacity:0.8; -moz-opacity:0.8; filter: alpha(opacity=80) black; -khtml-opacity: 0.8; background-color:#000; } .adv img:hover { opacity:1; -moz-opacity:1; filter: alpha(opacity=100) black; -khtml-opacity: 1; background-color:#000; }

Код работает великолепно, но картинки под div’ом расположены на черном фоне, причем этот фон на 2-3 пикселя выперает вверх и вниз. Что исправить?

Источник

CSS — затемненные картинки при наведении осветляются

Пять строк CSS кода без использования JavaScript и прочих языков. Затемненная картинка при наведении курсора становится светлой.

Полезное решение, когда необходимо спрятать счетчики веб-аналитики или сделать их менее заметными.

HTML разметка

CSS. По умолчанию затемнены

/*Светление картинок при наведении*/ .box-image a img, .box-image img < opacity:0.3; >.box-image a img:hover, .box-image img:hover

CSS. По умолчанию не затемнены

/*Затемнение картинок при наведении*/ .box-image a img, .box-image img < opacity:1.0; >.box-image a img:hover, .box-image img:hover

Как вы уже могли догадаться, за тень отвечает стиль opacity, который накладывает на объект не тень, а прозрачность. Значение параметров колеблется от 0 — полная прозрачность до 1 — 100% непрозрачности.

Похожие записи

Очень простой скрипт для скрытия внешних ссылок на любом сайте. Разрабатывался для CMS WordPress, но будет работать абсолютно везде. Полностью.

Рассмотрим наглядный пример управления таймером на jQuery. Задача: Таймер запускается при загрузке страницы. При клике на кнопку с числом скорость.

Cookies — возможность сохранить в браузере некие данные, которые не удалятся после обновления страницы. Задача: отследить с помощью javaScript фиксированное.

Уже после написаний данной статьи случайно наткнулся на реальный пример описанного здесь простейшего косяка в jQuery коде. Это известный онлайн.

В данной статье расскажу про очень простое решение с модальным окном на jQuery. Прикручивал его поверх платного конструктора шаблонов сайта.

Источник

Фильтры для изображений с CSS Filter Effects

В графических редакторах очень легко менять яркость или контраст изображений, применять различные фильтры. С недавних пор это можно делать и средствами CSS прямо на веб-страницах с помощью CSS Filter Effects.

Поддержка браузерами

Как обычно, браузеры, поддерживающие данный параметр, можно посмотреть на caniuse.com:

Эффекты

Применение эффектов очень простое, например, такая конструкция применяется для перевода цветного изображения в черно-белое:

В обоих эффектах можно устанавливать уровень эффекта от 0 до 100%.

brightness может принимать отрицательные значения, изображение будет затемняться:

При 100% эффекта contrast изображение не меняется, поэтому можно установить 200%:

Эффекты можно комбинировать:

Так можно получить красивый hover-эффект:

img:hover < -webkit-filter: grayscale(0%); >img:hover < -webkit-filter: sepia(0%); >img:hover < -webkit-filter: brightness(0%); >img:hover

В спецификации подробно описаны остальные эффекты, такие как hue-rotate, invert и saturate. Но они гораздо менее применимы на живых проектах.

Источник