css — SVG hover эффект
Я подключаю на страницу иконки с помощью код svg + path при наведении они должны менять цвет. Делаю так CSS
.icon:hover {
fill: #000;
}
но есть внутри иконки есть пустое пространство и навести туда цвет при наведении сразу сбрасывается. Как мне оставить цвет, если курсор находится в зоне данного блока?
- css
- svg
- hover
- color
1
но есть внутри иконки есть пустое пространство и навести туда цвет при наведении сразу сбрасывается. Как мне оставить цвет, если курсор находится в зоне данного блока?
Сделайте закраску fill всего SVG
Ниже полный код:
svg {
fill:black;
}
svg:hover {
fill:red;
}<svg xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd" viewBox="0 0 24 24">
<path d="M12.
892 13.745s.427.038.656-.247l.448-.563c.216-.28.738-.458 1.249-.174.676.382 1.55.982 2.149 1.541.33.278.407.688.182 1.121l-.002.009c-.232.408-.541.791-.932 1.148l-.009.006c-.44.367-.946.58-1.487.404l-.01-.014c-.972-.275-3.304-1.464-4.79-2.649-2.431-1.918-4.159-5.082-4.637-6.778l-.015-.01c-.176-.543.039-1.049.404-1.488l.007-.008c.357-.391.739-.701 1.148-.932l.009-.002c.432-.225.842-.149 1.121.182.367.379 1.056 1.291 1.54 2.149.284.51.106 1.033-.173 1.248l-.564.448c-.284.23-.247.657-.247.657s.834 3.156 3.953 3.952zm4.907-2.616c-.167 0-.303-.135-.304-.302-.014-1.83-.564-3.288-1.634-4.332-1.072-1.045-2.427-1.581-4.027-1.592-.168-.001-.303-.138-.301-.306.001-.167.136-.301.303-.301h.002c1.762.012 3.258.606 4.447 1.764 1.19 1.162 1.802 2.765 1.817 4.763.001.167-.133.304-.301.306h-.002zm-1.595-.624h-.007c-.168-.004-.301-.143-.297-.31.024-1.038-.273-1.878-.906-2.569-.63-.689-1.495-1.065-2.645-1.149-.167-.013-.293-.158-.281-.325.013-.167.158-.293.325-.281 1.294.095 2.32.548 3.049 1.345.733.8 1.092 1.
807 1.065 2.992-.004.165-.139.297-.303.297zm-1.558-.522c-.161 0-.295-.126-.303-.289-.051-1.03-.537-1.534-1.527-1.588-.168-.009-.296-.152-.287-.319.009-.168.151-.296.319-.287 1.308.07 2.034.819 2.101 2.164.009.167-.12.31-.288.318l-.015.001zm6.817 3.469c-.605 4.877-4.172 5.185-4.83 5.396-.28.09-2.882.737-6.152.524 0 0-2.438 2.94-3.199 3.705-.119.119-.258.167-.352.145-.131-.032-.167-.188-.165-.414l.02-4.016v-.001c-4.762-1.323-4.485-6.295-4.431-8.898.054-2.603.543-4.736 1.996-6.17 2.61-2.364 7.987-2.011 7.987-2.011 4.541.02 6.717 1.387 7.222 1.845 1.675 1.434 2.528 4.867 1.904 9.895zm-.652-11.113c-.597-.548-3.007-2.298-8.375-2.322 0 0-6.33-.382-9.416 2.45-1.718 1.718-2.322 4.231-2.386 7.348-.063 3.118-.146 8.958 5.484 10.542l.006.002-.004 2.416s-.035.979.609 1.179c.779.241 1.236-.502 1.981-1.304.408-.44.971-1.086 1.397-1.58 3.851.322 6.812-.417 7.149-.526.777-.253 5.177-.816 5.893-6.657.738-6.022-.358-9.83-2.338-11.548z"/>
</svg>
Вариант, когда на каждой странице иконка может иметь разные цвета
Для этого используется <symbol> и команда клонирования <use> с индивидуальной закраской fill="red"
<svg xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd" viewBox="0 0 24 24"> <symbol> <path d="M12.892 13.745s.427.038.656-.247l.448-.563c.216-.28.738-.458 1.249-.174.676.382 1.55.982 2.149 1.541.33.278.407.688.182 1.121l-.002.009c-.232.408-.541.791-.932 1.148l-.009.006c-.44.367-.946.58-1.487.404l-.01-.014c-.972-.275-3.304-1.464-4.79-2.649-2.431-1.918-4.159-5.082-4.637-6.778l-.015-.01c-.176-.543.039-1.049.404-1.488l.007-.008c.357-.391.739-.701 1.148-.932l.009-.002c.432-.225.842-.149 1.121.182.367.379 1.056 1.291 1.54 2.149.284.51.106 1.033-.173 1.248l-.564.448c-.284.23-.247.657-.247.657s.834 3.156 3.953 3.952zm4.907-2.616c-.167 0-.303-.135-.304-.302-.014-1.83-.564-3.288-1.634-4.332-1.072-1.045-2.427-1.581-4.027-1.592-.168-.001-.303-.138-.301-.306.001-.167.136-.301.303-.301h.002c1.762.012 3.258.606 4.447 1.764 1.19 1.162 1.802 2.765 1.817 4.763.001.167-.133.304-.301.306h-.002zm-1.595-.624h-.007c-.168-.004-.301-.143-.297-.31.024-1.038-.273-1.878-.906-2.569-.
63-.689-1.495-1.065-2.645-1.149-.167-.013-.293-.158-.281-.325.013-.167.158-.293.325-.281 1.294.095 2.32.548 3.049 1.345.733.8 1.092 1.807 1.065 2.992-.004.165-.139.297-.303.297zm-1.558-.522c-.161 0-.295-.126-.303-.289-.051-1.03-.537-1.534-1.527-1.588-.168-.009-.296-.152-.287-.319.009-.168.151-.296.319-.287 1.308.07 2.034.819 2.101 2.164.009.167-.12.31-.288.318l-.015.001zm6.817 3.469c-.605 4.877-4.172 5.185-4.83 5.396-.28.09-2.882.737-6.152.524 0 0-2.438 2.94-3.199 3.705-.119.119-.258.167-.352.145-.131-.032-.167-.188-.165-.414l.02-4.016v-.001c-4.762-1.323-4.485-6.295-4.431-8.898.054-2.603.543-4.736 1.996-6.17 2.61-2.364 7.987-2.011 7.987-2.011 4.541.02 6.717 1.387 7.222 1.845 1.675 1.434 2.528 4.867 1.904 9.895zm-.652-11.113c-.597-.548-3.007-2.298-8.375-2.322 0 0-6.33-.382-9.416 2.45-1.718 1.718-2.322 4.231-2.386 7.348-.063 3.118-.146 8.958 5.484 10.542l.006.002-.004 2.416s-.035.979.609 1.179c.779.241 1.236-.502 1.981-1.304.408-.44.971-1.086 1.397-1.58 3.851.322 6.812-.417 7.149-.526.777-.
Зарегистрируйтесь или войдите
Регистрация через Google
Регистрация через Facebook
Регистрация через почту
Отправить без регистрации
Необходима, но никому не показывается
Отправить без регистрации
Почта
Необходима, но никому не показывается
Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки
Как изменить фоновое изображение на другое изображение при наведении
- Скачать
- 300+ Функций
- Конструкторы сайтов
- Премиум
- Форумы
- Help
- RU
- Войти
- Зарегистрироваться
- Главная
- Функции
- Эффекты анимации
- Анимация при наведении
- Фоновое Изображение Для Изображения При Наведении
Вы также можете изменить заливку на изображения и даже изменить одно фоновое изображение на другое при наведении курсора, что может сильно развлечь ваших посетителей.
Выберите фигуру и добавьте изображение для фона. Перейдите в раздел «Анимация включена» на панели свойств и нажмите «Наведение». Включите эффект наведения и выберите изображение в качестве типа фона. Выберите изображение при наведении. Тестовое задание.
Your browser does not support HTML5 video.
Просмотр по категориям функций
Элементы веб-страницы
Поддерживаемые системы
Визуальный редактор страниц
Элементы дизайна
Медиа библиотеки
Свойства элемента
Отзывчивый
Эффекты анимации
Настройки темы
Форма обратной связи
Верхний и нижний колонтитулы
Блог
Электронная торговля
SEO
Пользовательский код
Особенности приложения
Свойства сайта и страницы
Виджеты WordPress
Все, что вам нужно для создания бесплатного веб-сайта
Используйте наш Конструктор веб-сайтов для проектирования и создания веб-сайтов без программирования.
Перетащите все, что хотите, в любое место.
Создатель веб-сайта автоматически адаптирует ваш веб-сайт для мобильных устройств, чтобы сделать его адаптивным. Выбирайте из более чем 10,000 настраиваемых шаблонов веб-сайтов.
Скачать для Windows Скачать для Mac
Связанные функции
Your browser does not support HTML5 video.
Прозрачность при наведении
Вы можете изменить прозрачность элемента при наведении, чтобы добавить интерактивности и привлекательности дизайну веб-сайта. На панели свойств щелкните ссылку Hover и установите флажок Hover. Установите прозрачность, которая будет применяться при наведении курсора. Щелкните где-нибудь в блоке, чтобы снять выделение с элемента. Наведите указатель мыши на элемент, чтобы проверить изменение прозрачности.
Your browser does not support HTML5 video.
Цвет фона для градиента при наведении
Добавляя анимацию наведения к фигуре с фоном, вы можете изменить сплошную заливку на что-то привлекательное, например, на градиент.
Для этого выберите фигуру и перейдите к ссылке Hover на панели свойств. Нажмите на ссылку «Анимация при наведении» и установите флажок «Наведение». Выберите тип градиента для фона и установите градиент.
Your browser does not support HTML5 video.
Масштаб при наведении
Масштабирование может выглядеть как самая естественная реакция на ваш курсор. Поэтому он может быть очень популярен. Вы можете легко добавить Scale On Hover на свой сайт. Для этого добавьте или выберите элемент, а затем перейдите на панель свойств. Нажмите ссылку «Наведение» в разделе «Анимация включена» и установите флажок «Наведение». Прокрутите вниз до свойств Масштаб, Поворот и Перемещение. Фактический размер равен 100.
Your browser does not support HTML5 video.
Радиус при наведении
Для изображений и фигур, групп и ячеек сетки вы можете изменить радиус при наведении. С этим свойством элементы становятся привлекательными, побуждая к действию (кнопки «Купить сейчас», «Подробнее» и т.
д.) и делая ваш дизайн уникальным. В разделе Hover панели свойств включите режим Hover. Перетащите ползунок «Радиус», чтобы установить его значение «При наведении».
Your browser does not support HTML5 video.
Продолжительность наведения
Вы можете управлять анимацией при наведении, установив ее продолжительность. Установите продолжительность анимации при наведении курсора, добавьте или выберите элемент и перейдите на панель свойств. Выберите ссылку «Анимация при наведении» в разделе «Анимация при наведении» и установите флажок «Наведение». Поддерживаемые значения для ползунка — от 10 до 200, и при необходимости вы можете ввести большее число в это поле.
Your browser does not support HTML5 video.
Поворот при наведении
Вращение при наведении — следующий важный и сложный эффект. Чтобы повернуть элемент при наведении, добавьте или выберите элемент и перейдите на панель свойств. Перейдите и щелкните ссылку Hover в разделе «Анимация включена», а затем установите флажок Hover.
Используйте ползунок для установки угла поворота или введите значение в поле ввода. Поддерживаемые значения угла поворота: от 0 до 359.
Your browser does not support HTML5 video.
Граница при наведении
Граница элемента также важна для улучшения взаимодействия элементов и привлечения внимания посетителей. Вы можете изменить границу при наведении для таких элементов, как значок, изображение, фигура, группа, сетка и т. д. В разделе «Наведение» на панели свойств установите флажок «Наведение». Измените границу, чтобы она отображалась при наведении на элемент.
Your browser does not support HTML5 video.
Тень при наведении
Вы можете изменить свойство Shadow при наведении для текстов и других элементов. Чтобы установить тень при наведении, добавьте или выберите элемент. Затем щелкните ссылку «Наведение» на панели свойств, установите флажок «Наведение», измените «Тень», чтобы она применялась при наведении.
Вы можете начать с одного из пресетов теней и при необходимости настроить его.
How To Create Hover Effects For A Background Image On A Webpage
One of the most popular questions in web development is how to change an image on hover using CSS property. Many try looking for alternatives not everyone enjoys customizing the image on hover like CSS features demand to do. And others do not want to learn specifics of how to change an image or how to create image hover effects. In this case, our site builder can provide all the necessary functions and features to help you create an image overlay hover effect that changes the image to another when you move your mouse over it and even more.
Our animations on hover are a great example of how to create image overlay and image hover effect or any other element hover effects in only a few clicks. So how to change your image overlay to another image overlay using these effects so that that one image would smoothly or instantly change from one to another when a visitor puts the mouse over an image.
Select the image element, go to animations on section, and pick hover. Go to the shape fill section to add the image that will be used in hover effects & overlay to switch between one another.
Create a memorable modern hover effect for the image element and quickly change image and hover effect using the property panel. You do not require using CSS feature hover over the image, or change image using CSS property. Even without hover using CSS, our builder can create image overlay hover feature with an awesome effect that is popular in social media platforms and sites. Change the image overlay hover and move your mouse over it to review how the cursor mouse over the image will react and what impact it will make. Look forward to related articles on the hover using CSS and other features.
57 лучших бесплатных эффектов CSS для изображений при наведении
Добавление эффектов наведения к изображениям — отличный способ добавить изюминку вашему веб-сайту.
Они не только круто выглядят, но и могут быть использованы для предоставления дополнительной информации о продукте или услуге. Используя HTML и CSS, вы можете создавать удивительные эффекты наведения изображения, которые будут привлекать ваших посетителей и заставлять их возвращаться снова и снова.
Бесплатные эффекты CSS для изображений при наведении
Красивые эффекты для изображений с помощью jQuery/CSS3
Используя jQuery и CSS3, мы проведем вас через процесс разработки привлекательной галереи изображений с интерактивным эффектом наведения. Этот пример был разработан с помощью плагина jQuery animate opacity, чтобы изменить цветовой эффект изображения, а также включить заголовок заголовка. Кроме того, к этому эффекту изображения была добавлена кнопка красоты CSS3, чтобы сделать его еще более привлекательным.
Демонстрация Дополнительная информация / загрузка
Наведение курсора на изображение CSS
Набор элементов CSS, которые можно вырезать и вставлять в таблицу стилей CSS для создания различных эффектов при применении к изображениям.
Эти эффекты могут быть получены путем копирования и вставки элементов CSS в вашу таблицу стилей.
Дополнительная информация / загрузка
Эффект наведения на изображение Эффект фильтра CSS3
Имейте в виду, что некоторые браузеры и версии могут неправильно интерпретировать определенный код CSS. Если вы хотите использовать все элементы CSS, вам следует просматривать страницу в самой последней версии Google Chrome. Если вам нужна более конкретная информация о том, как добиться каждого эффекта во всех браузерах, свяжитесь с нами как можно скорее.
Подробнее / скачать демо
Изображение при наведении с заголовком и подписью при наведении
Подробнее / скачать
Эффект наведения на изображение с заголовком и значком
Подробнее / скачать
Изображение при наведении — неделя 10/52
Подробнее / скачать
Кнопка CSS Image Hover Show
Подробнее / скачать
Split Image Hover Effect
Подробнее / скачать
CSS Image Effects 3
Подробнее / скачать
Image Hover 63 Pure CSS
Подробнее / скачать
Горизонтальный макет портфолио с анимацией CSS3 и jQuery
Подробнее / скачать
Обрезанное изображение и эффект масштабирования при наведении
Подробнее / скачать
Canvas Image Hover Interaction
Подробнее / скачать
Изображение профиля при наведении
Подробнее / скачать
Увеличение изображения при наведении
Подробнее / скачать
3D-эффект при наведении с учетом направления (концепция)
Это довольно просто, используя JS, мы можем легко определить направление движения курсора, затем я использую анимацию CSS для каждого случая (всего 8).
Подробнее / скачать
Circle CSS3 Effects
Подробнее / скачать
SVG clip-path Hover Effect
Попытка воссоздать эффект наведения сетки портфолио CJ Gammon, используя SVG clip-path и CSS Transitions.
Подробнее / скачать
CSS3 Hover Effect с использованием :after Psuedo Element
Дополнительная информация / загрузка
Эффект наведения с учетом направления с CSS3 Transform и jQuery
Дополнительная информация / загрузка
CSS-эффект при наведении курсора для галереи Bootstrap
Дополнительная информация / загрузка
Link Effects
9000 2 Подробнее / скачатьПодробнее / скачать
Pure CSS Thumbnail Hover Effect
Подробнее / скачать
Pure CSS Blur Hover Effect
Подробнее / скачать
Эффект наведения формы с помощью SVG
В этом уроке мы воссоздадим эффект наведения, как показано на веб-сайте The Christmas Experiments.
Мы будем использовать SVG для формы и Snap.svg для анимации при наведении.
Загрузка демо-версии Подробнее
Эффект анимации границ с помощью SVG и CSS
В веб-дизайне Карла Филипа Бреннера есть несколько очень креативных и тонких анимаций, и сегодня мы хотим изучить, как воссоздать эффект анимации границ с помощью CSS-переходов на линиях SVG. .
Загрузка демо-версии Подробнее
Эффект качания при наведении с анимацией CSS3
В этом уроке я использую анимацию и переходы CSS3 для создания эффекта качания при наведении для кнопки «Подпишитесь на меня в Twitter».
Демо Дополнительная информация / загрузка
Иконки социальных сетей с помощью CSS3
Демо Дополнительная информация / загрузка
Анимированный эффект открывающего типа
Учебное пособие по созданию интересного анимированного 3D-эффекта открывающегося типа с помощью псевдоэлементов, преобразований CSS и переходы. Идея основана на проекте Edenspiekermann Open Type, и это очень творческий способ отображения букв и игры с ними.
Демо Дополнительная информация / загрузка
Адаптивная галерея портфолио с jQuery Учебное пособие
Демонстрационное руководство
Примеры анимации и переходов при наведении псевдоэлементов
Демо Дополнительная информация / загрузка
Эффект наведения курсора с использованием Para llax Style
Демонстрационное руководство
Учебное пособие по CSS3 Hover Effect с изображением Circle
Демонстрационное руководство
Учебное пособие по CSS3 с Websymbols
Демонстрационное руководство
Меню ресторана в стиле CSS3
Демо-руководство
Эффекты для значков
Несколько простых эффектов для значков. Идея состоит в том, чтобы создать тонкий и стильный эффект с помощью CSS-переходов и анимации якорей и их псевдоэлементов. Демонстрация Подробнее / скачать
CSS Powered Buttons with Hover Tooltips
Вот еще одна кнопка для социальных сетей, которую я сделал ранее сегодня, вы можете добавить их в свой следующий проект, я использую только кнопку социальных сетей в качестве примера, вы можете использовать их практически для любых целей.
Судя по изображению, вы, вероятно, заметили эффект всплывающей подсказки. Посмотрите демо, чтобы увидеть кнопку в действии.
Demo Подробнее / скачать
Эффекты при наведении подписи
Стильные эффекты для подписей к изображениям. Идея состоит в том, чтобы иметь сетку фигур и применять эффект наведения к элементам, который покажет заголовок с заголовком, автором и кнопкой ссылки.
Demo Подробнее / скачать
Креативные стили кнопок Эффекты
Этот набор кнопок состоит из нескольких простых, творческих и тонких стилей и эффектов, которые вдохновят вас. Эффекты можно увидеть при наведении на одни кнопки и нажатии на другие
Демонстрация Подробнее / скачать
Оригинальные эффекты при наведении
Мы собираемся создать несколько эффектов при наведении миниатюр с помощью переходов CSS3. При наведении курсора на миниатюру мы покажем некоторое описание миниатюры, используя в каждом примере свой стиль.
Демо Дополнительная информация / загрузка
Эффекты наведения CSS3 с переходами CSS3
На этот раз я покажу вам другие пять примеров эффектов наведения с использованием различных свойств CSS по сравнению со старым руководством, размещенным на Codrops.
Демо Подробнее / скачать
Плитки с анимированным :hover
Демо подробнее
Следуй за котенком
Простой эффект для прокрутки на сетке, где содержимое скользит в зависимости от предыдущей позиции.
Demo Подробнее / скачать
Text Revel on Hover: Corner Triangle Slide Overlay
Я пытаюсь придумать идеи для домашней страницы моего нового сайта и «mem». Просто тестирую еще одну технику парения. -David Leininger
Demo Подробнее / скачать
Логотип Slim и SCSS
Наведите и удерживайте этот минималистичный логотип.
Демонстрация подробнее
Кнопка CSS Rollover – растущая рамка
Кнопка с рамкой расширяется при наведении курсора
Демо подробнее
CSS3 Эффекты наведения меню
Набор эффектов наведения для меню, использующих переходы CSS3.
Подробнее / скачать
ФЛАГ Египта
Демо подробнее
Profile CSS Hover Effect
Демо подробнее
Поворот CSS3 при наведении
В этом примере показано, как использовать CSS3 для включения поворота 2D или 3D для всех основных браузеров (IE/Chrome/Mozilla/Safari).
Демонстрация Подробнее
Несколько эффектов связи стилей
В примерах мы используем переходы при наведении, но вы также можете представить эти эффекты при нажатии или в качестве начальной анимации.
Демо Дополнительная информация / загрузка
Эффекты навигации по сетке с jQuery
В наших примерах мы покажем вам десять способов навигации по набору эскизов. Мы рассмотрим некоторые возможности и способы применения эффекта.
Демонстрация Подробнее / скачать
Диагональный слайд
Скольжение изображения по диагонали.
Демонстрация подробнее
Эффекты наведения на сообщение в блоге/изображение
Небольшой приятный эффект при наведении на сообщение в блоге, изображение и т. д. Предварительный просмотр текста ограничен 3 строками с кнопкой «Подробнее». Дата или штамп автора внизу справа. Включает в себя: верхний, левый, нижний и правый эффекты, диагонали из каждого угла. Далекое будущее: наведение с учетом направления обеспечивает правильный эффект в зависимости от положения мыши при входе в целевую область.
Демонстрация Подробнее
Демонстрация CSS при наведении курсора
Небольшая демонстрация создания эффекта наведения на блок с помощью CSS.
Демо подробнее
CSS3 Lightbox
Демо Подробнее / скачать
Top CSS Image Hover Animation Effects 2023
Вот коллекция Top CSS Image Hover Animation Effects в 2023 году, которая наполняет энергией ваш сайт. Вы можете использовать этот CSS-анимационный эффект при наведении изображения, чтобы лучше показать свой веб-сайт. Это идеальные CSS-анимационные эффекты при наведении изображения для ваших посетителей.
Теперь давайте начнем со списка. Чтобы просмотреть демонстрацию эффектов, упомянутых здесь, вы можете нажать кнопку «Дополнительная информация/скачать».
1. Трехмерный эффект наведения с учетом направления
Трехмерный эффект наведения с учетом направления, созданный Ноэлем Дельгадо
Дополнительная информация/скачать
s (CSS 3d hover)
Места в мире (CSS 3d hover) — один из лучших стильных эффектов, созданных Akhil sai ram, и он придает вашим простым изображениям вид 3D-анимации.
Дополнительная информация/загрузка
3. CSS Gradient Hover Effect
Если вам нравится красочный анимационный дизайн, CSS Gradient Hover Effect от Jon Daiello лучше всего подходит для вас, он придает вашим изображениям красивый эффект градиента. .
Дополнительная информация/загрузка
4. Эффекты отображения изображения при наведении
Эффекты отображения изображения при наведении от Mary Lou — это уникальный эффект для вашего веб-сайта. В этом эффекте вы можете увидеть уменьшенное изображение со специальным эффектом.
при наведении на ссылку.
Дополнительная информация/загрузка
5. Простой эффект наведения на плитку
Простой эффект наведения на плитку Криса Диси используется для отображения заголовка при наведении курсора на изображение.
Дополнительная информация/загрузка
6. Эффекты наведения 3D-миниатюры
Эффекты наведения 3D-миниатюры используются для придания изображениям уникального трехмерного эффекта наведения.
Подробнее/Скачать
7. 3D-эффект при наведении курсора
3D эффект при наведении дает классный эффект вашему изображению, изображение будет двигаться в разных направлениях при перемещении курсора по изображению.
Дополнительная информация/загрузка
8. Изометрические и трехмерные сетки
Изометрические и трехмерные сетки придают вашим простым изображениям красивый и привлекательный эффект наведения на сетку.
