• Список кодов
    →
  • Эффект: ЧБ картинка при наведении становится цветной
Эффект: ЧБ картинка при наведении становится цветной
Небольшое техническое отступление

Все элементы на сайте - блоки, изображения, абзацы текстов, поля формы, кнопки и пр - в коде Html обозначаются тегами. Например, <p>, <h1>, <h2>, <div>, <img>, <article> и многие другие.

Стили элементов - их размер, цвет, интервалы между ними, тени, градиенты и пр - описаны кодом CSS.

Чтобы на сайте разместить изображение, обычно используют два основных способа - изображение в теге <img> и изображение в другом теге (например, <div>), у которого кодом CSS указан стиль background-image.

Как следствие, мы разместим ниже два немного разных кода для этих двух случаев.

Примечание 1
Все изображения изначально должны быть цветными. Этот код не сможет "окрасить" ЧБ изображение.

Примечание 2
Эффект наведения, о котором мы тут говорим, работает только если есть курсор, который можно навести на изображение. На смартфонах и планшетах мы не можем навести курсор, и чтобы картинки не оставались ЧБ, наш код будет возвращать изображения в исходный цветной вид, если ширина экрана меньше 640px.

Если необходимо, чтобы картинка оставалась цветной и в мобильной версии, то вот эту часть просто удаляете.

@media (max-width: 640px){
        #rec00000001 img{
            filter: none;
        }
I способ
Когда картинка в теге <img>
Работает с блоками IM01, IM04, IM07, IM08, IM10, IM11, IM13, GL05, GL09, GL23
Ниже мы приведем продемонстрируем работу кода
Photo by Jacob
Photo by Leio
Photo by Jacob
Photo by Marion
Photo by Jacob
Photo by Shifaaz
Photo by Mike
Photo by Jason
Photo by Sven
Photo by Ed
Photo by David
Photo by Hal
Как сделать:

1. Создаем блок изображения
2. Вписываем ID блока/блоков в код вида #rec99999999.
Если окрашиваем картинки в одном блоке

<style>
   #rec00000001 img{ /* вместо #rec00000001 укажите айди номер блока, которому нужно присвоить эффект */
        filter: grayscale(100%);
    }
    
   #rec00000001 img:hover{
        filter: none;
    }

   @media (max-width: 640px){
        #rec00000001 img{
            filter: none;
        }
    }
</style>
Если окрашиваем картинки в нескольких блоках

<style>
   #rec00000001 img, #rec00000002 img, #rec00000003 img{ 
        filter: grayscale(100%);
    }
    
   #rec00000001 img:hover, #rec00000002 img:hover, , #rec00000002 img:hover{
        filter: none;
    }

   @media (max-width: 640px){
        #rec00000001 img, #rec00000002 img, #rec00000003 img{
            filter: none;
        }
    }
</style>
Если окрашиваем картинки на всем сайте

<style>
    img{ 
        filter: grayscale(100%);
    }
    
    img:hover{
        filter: none;
    }

   @media (max-width: 640px){
        img{
            filter: none;
        }
    }
</style>
II способ
Когда картинка в теге <div> и прописана CSS свойством background-image
Работает с блоками GL02, GL03, GL04, GL07, GL11, GL12, GL13, GL14, GL15, GL16, GL17, GL22 и с блоками магазина
Ниже мы продемонстрируем работу кода
Как сделать:

1. Создаем блок изображения
2. Вписываем ID блока/блоков в код вида #rec99999999.
Если окрашиваем картинки в одном блоке галерии

<style>
   #rec00000001 .t-bgimg{ /* вместо #rec00000001 укажите айди номер блока, которому нужно присвоить эффект */
        filter: grayscale(100%);
    }
    
   #rec00000001 .t-bgimg:hover{
        filter: none;
    }

   @media (max-width: 640px){
        #rec00000001 .t-bgimg{
            filter: none;
        }
    }
</style>
Если окрашиваем картинки в нескольких блоках галереи

<style>
   #rec00000001 .t-bgimg, #rec00000002 .t-bgimg, #rec00000003 .t-bgimg{ 
        filter: grayscale(100%);
    }
    
   #rec00000001 .t-bgimg:hover, #rec00000002 .t-bgimg:hover, , #rec00000002 .t-bgimg:hover{
        filter: none;
    }

   @media (max-width: 640px){
        #rec00000001 .t-bgimg, #rec00000002 .t-bgimg, #rec00000003 .t-bgimg{
            filter: none;
        }
    }
</style>
Если окрашиваем все галереи

<style>
    .t-bgimg{ 
        filter: grayscale(100%);
    }
    
    .t-bgimg:hover{
        filter: none;
    }

   @media (max-width: 640px){
        .t-bgimg{
            filter: none;
        }
    }
</style>
Плавное окрашивание
При наведении картинка может окрашиваться постепенно, но есть нюанс - обесцвечивание, когда мы снова убрали курсор с изображения, иногда в конце происходит не совсем плавно. Поэтому мы не рекомендуем использовать плавное окрашивание.
Если для твоих целей это не проблема - смело бери на вооружение.

Ниже представлен код и блок с изображением для демонстрации.
Simplicity is somehow essentially describing the purpose and place of an object and product. The absence of clutter is just a clutter-free product. That's not simple.
Как сделать:

1. Создаем блок изображения
2. Вписываем ID блока/блоков в код вида #rec99999999.

<style>
    #rec00000001 img{
        filter: grayscale(100%);
        transition: filter 0.3s linear; /* строка, делающая окрашивание плавным. 0.3s - длительность, можно указать любую, например 1s (1 секунда) */
    }
    
    #rec00000001 img:hover{
        filter: none;
    }
    
    @media (max-width: 640px){
        #rec00000001 img{
            filter: none;
        }
    }
</style>
SCIENCE MEDIA
Fun Science education programs
We discuss the role of technologies in everyday life and developing a new society
Made on
Tilda