Как затемнить фон картинки через css, чтобы при наведении на нее мышкой она осветлялась
Мне было интересно, как делают на блогах так, что картинки темные, а когда наводишь на них мышкой — они становятся светлыми. Я задался этим вопросом и решил его. Все материалы, коды предназначены для движка WordPress, ибо на других я не работаю и не сталкивался с ними.
Наш вопрос: Ка затемнить рисунок, чтобы при наведении на него мышкой он осветлялся.
Примеры работы затемнения вы можете посмотреть у меня на блоге в трех местах: 1) Счетчики в футере (очень затемненные); 2) Кнопки социальных закладок (средне затемненные); 3) Кнопки подписки на новости в сайдбаре (мало затемненные). Чтобы попробовать как это работает, просто наведите на соответствующую картинку.
Собственно приступим к реализации:
Все элементы затемнения задаются специальным кодом. Прописывается этот код в wordpress в файле style.css. То есть 1) Открываем файл style.css.
Наш следующий шаг — придумать название для кода. Для затемнения групп картинок ( у меня это: счетчики, кнопки соц закладок, кнопки подписок) я использую отдельные коды (классы — class), то есть 3 разных класса. Можно придумать кучу разнообразных затемнений, как для групп картинок, так и для каждой в отдельности.
Каждый на блоге имеет счетчики, давайте проведем эксперимент над ними. Возьмем название schetchiki.
2) В самом низу страницы style.css вставляем следующее:
.schetchiki{
font-size: 13px; /* размер шрифта */
font-weight: bold; /* стиль текста: жирный */
padding:0px; /* отступ от границ */
border:0px solid #CCC; /* толщина и цвет рамки */
}
Для чего нужен этот блок. Как видно, я уже вписал в сам блок объяснения, но раскрою подробнее: font-size — задает размер шрифта, если мы будем писать что-то в блок с картинками. font-weight — определяет стиль текста, в моем случае blod — жирный (можно так же поставить normal, bolder, lighter). padding — определяет отступ от границы, то есть расстояние от вашего текста или картинки до граница (рамки), если конечно вы будете ее делать указав border — который укажет толщину рамки (если оставить ноль, то рамки не будет) и цвет (html код, ставится после знака #. Коды цветов можно посмотреть, набрав в поиске Яндекса «Палитра цветов Яндекс»). 3) Чуть ниже предыдущего кода вставляем:
.schetchiki a img{
border: none;
opacity:0.5; /* непрозрачность: 50% */
}
Этот блок предназначен для отображения картинка, такой, как мы будем ее видеть до наведения на нее мышкой. То есть определяем степень затемнения (или непрозрачность).
Здесь нам важна команда opacity — она и определяет затемнение. Значение можно ставить от 0.0 до 1.0. Как вы видите у меня стоит значение 0.5, то есть прозрачность составляет 50%, посмотреть, как это выглядит можете в футере. Далее переходим к четвертому пункту.
4) Вставляем третий и последний блок:
.schetchiki a:hover img{
border: none;
opacity:1.0; /* непрозрачность: 100% */
}
Этот блок будет определять какой станет наша картинка, когда мы наведем на нее мышкой (значение a:hover). У меня указано значение opacity:1.0, что означает — картинка будет становится полностью видимой, без затемнения.
В итоге мы получаем вот такой большой блок, его и надо вставить в файл style.css, все настройки можете поменять на свои.
.schetchiki{
font-size: 13px; /* размер шрифта */
font-weight: bold; /* стиль текста: жирный */
padding:0px; /* отступ от границ */
border:0px solid #CCC; /* толщина и цвет рамки */
}
.schetchiki a img{
border: none;
opacity:0.5; /* непрозрачность: 50% */
}
.schetchiki a:hover img{
border: none;
opacity:1.0; /* непрозрачность: 100% */
}
Последняя наша задача, применить данный код в действии.
Заходим туда, где у вас расположен код счетчика (ну или любой другой картинки). У меня он расположен в футере, я захожу в footer.php и ищу код счетчика. Нахожу код счетчика LiveInternet.
Теперь внимание, необходимо в начале кода поставить такое <div class=»schetchiki»>
А в конце поставить </div>
Получаем вот такое:
Комментирование закрыто.