Img hover: How To Create Image Hover Overlay Effects

15.03.2021 Facebook Twitter LinkedIn Google+ Разное

Содержание

:hover — CSS | MDN

CSS псевдокласс :hover срабатывает, когда пользователь наводит на элемент мышью, но не обязательно активирует его. Этот стиль может переопределяться другими относящимися к ссылкам псевдоклассами, такими как :link, :visited и :active, появляющимися в соответствующем порядке. Чтобы стилизировать ссылки должным образом, вставьте правило :hover после правил :link и :visited до :active, как определено LVHA-порядком: :link — :visited — :hover — :active.

Псевдокласс :hover может применяться к любому псевдоэлементу. Экспериментальная возможность

Браузеры, такие как Firefox, Internet Explorer, Safari, Opera или Chrome, применяют соответствующий стиль, когда курсор (указатель мыши) наводится на элемент.

Примечание: на сенсорных экранах :hover проблемный или не работает. В зависимости от браузера, псевдокласс :hover может никогда не сработать, или сработать на некоторое время после нажатия на элемента, или может продолжать действовать даже остаться после того, как пользователь коснулся элемента до нажатия на другой элемент. Так как сенсорные устройства очень распространены, то веб-разработчикам очень важно не иметь контент, доступный только при наведении, так как такой контент неудобно или невозможно использовать на таких устройствах.

:link:hover { outline: dotted red; }
.foo:hover { background: gold; }

Выпадающее меню

С псевдоклассом :hover вы можете создавать сложные каскадные алгоритмы. Эта техника часто используется, например, чтобы создать выпадающие меню на чистом CSS (только на CSS, без использования JavaScript). Сущность этой техники — создание правил, типа следующего:

div. menu-bar ul ul {
  display: none;
}
div.menu-bar li:hover > ul {
  display: block;
}

применим к HTML структуре типа следующей:

<div>
  <ul>
    <li>
      <a href="example.html">Меню</a>
      <ul>
        <li>
          <a href="example.html">Ссылка</a>
        </li>
        <li>
          <a href="example.html">Подменю</a>
          <ul>
            <li>
              <a href="example.html">Подменю</a>
              <ul>
                <li><a href="example.html">Ссылка</a></li>
                <li><a href="example.html">Ссылка</a></li>
                <li><a href="example.html">Ссылка</a></li>
                <li><a href="example.html">Ссылка</a></li>
              </ul>
            </li>
            <li><a href="example.html">Ссылка</a></li>
          </ul>
        </li>
      </ul>
    </li>
  </ul>
</div>

Смотрите наш полный пример выпадающего меню, основанный на CSS.

Галерея полноразмерных изображений и превью

Вы можете использовать псевдокласс :hover, чтобы создать галерею изображений с полноразмерными картинками, показываемыми при наведении на них мыши. Посмотрите это демо.

Примечание: Для аналогичного эффекта, но основанного на псевдоклассе:checked (применяется к скрытым радиокнопкам), смотрите это демо, взятое со страницы ru/CSS/:checked.

Specification
HTML Standard
# selector-hover
Selectors Level 4
# the-hover-pseudo

BCD tables only load in the browser

with JavaScript enabled. Enable JavaScript to view data.

Found a content problem with this page?

  • Edit the page on GitHub.
  • Report the content issue.
  • View the source on GitHub.

Want to get more involved?

Learn how to contribute.

This page was last modified on by MDN contributors.

:hover ⚡️ HTML и CSS с примерами кода

Псевдокласс :hover срабатывает, когда пользователь наводит на элемент мышью, но не обязательно активирует его.

Этот стиль может переопределяться другими относящимися к ссылкам псевдоклассами, такими как :link, :visited и :active, появляющимися в соответствующем порядке. Чтобы стилизировать ссылки должным образом, вам нужно вставлять правило :hover до правил :link и :visited, но после

:active, как определено в LVHA-порядке: :link — :visited — :hover — :active.

Псевдокласс :hover может применяться к любому псевдоэлементу.

Браузеры, такие как Firefox, Internet Explorer, Safari, Opera или Chrome, применяют соответствующий стиль, когда курсор (указатель мыши) наводится на элемент.

Псевдоклассы
  • :active
  • :any-link
  • :blank
  • :checked
  • :current()
  • :default
  • :defined
  • :dir()
  • :disabled
  • :empty
  • :enabled
  • :first
  • :first-child
  • :first-of-type
  • :focus
  • :focus-visible
  • :focus-within
  • :fullscreen
  • :future
  • :has()
  • :host
  • :host()
  • :host-context()
  • :hover
  • :indeterminate
  • :in-range
  • :invalid
  • :is()
  • :lang()
  • :last-child
  • :last-of-type
  • :left
  • :link
  • :local-link
  • :not()
  • :nth-child()
  • :nth-col()
  • :nth-last-child()
  • :nth-last-col()
  • :nth-last-of-type()
  • :nth-of-type()
  • :only-child
  • :only-of-type
  • :optional
  • :out-of-range
  • :past
  • :placeholder-shown
  • :read-only
  • :read-write
  • :required
  • :right
  • :root
  • :scope
  • :target
  • :target-within
  • :user-invalid
  • :valid
  • :visited
  • :where()

Синтаксис

/* Selects any <a> element when "hovered" */
a:hover {
  color: orange;
}

Спецификации

  • WHATWG HTML Living Standard
  • Selectors Level 4
  • Selectors Level 3
  • CSS Level 2 (Revision 1)

Описание и примеры

Пример 1.

Выпадающее меню

С псевдоклассом :hover вы можете создавать сложные каскадные алгоритмы. Эта техника часто используется, например, чтобы создать выпадающие меню на чистом CSS (только на CSS, без использования JavaScript). Сущность этой техники — создание правил, типа следуюшего:

CSSHTML

div.menu-bar ul ul {
  display: none;
}
div.menu-bar li:hover > ul {
  display: block;
}

<div>
  <ul>
    <li>
      <a href="example.html">Меню</a>
      <ul>
        <li>
          <a href="example.html">Ссылка</a>
        </li>
        <li>
          <a href="example.html"
            >Подменю</a
          >
          <ul>
            <li>
              <a href="example.html"
                >Подменю</a
              >
              <ul>
                <li><a href="example.html">Ссылка</a></li>
                <li><a href="example. html">Ссылка</a></li>
                <li><a href="example.html">Ссылка</a></li>
                <li><a href="example.html">Ссылка</a></li>
              </ul>
            </li>
            <li><a href="example.html">Ссылка</a></li>
          </ul>
        </li>
      </ul>
    </li>
  </ul>
</div>

Смотрите полный пример выпадающего меню, основанный на CSS.

Пример 2. Галерея полноразмерных изображений и превью

Вы можете использовать псевдокласс :hover, чтобы создать галерею изображений с полноразмерными картинками, показываемыми при наведении на них мыши. Посмотрите это демо.

Пример 3

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>hover</title>
    <style>
      a:link {
        color: #0000d0; /* Цвет ссылок */
        padding: 2px; /* Поля вокруг текста */
      }
      a:hover {
        background: #786b59; /* Цвет фона под ссылкой */
        color: #ffe; /* Цвет ссылки */
      }
    </style>
  </head>
  <body>
    <p><a href="1.

 html">Ссылка 1</a></p>
    <p><a href="2.html">Ссылка 2</a></p>
    <p><a href="3.html">Ссылка 3</a></p>
  </body>
</html>

В данном примере псевдокласс :hover применяется к ссылке (тегу <a>), при этом меняется цвет ссылки и фона под ней. Результат:

Пример 4

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>hover</title>
    <style>
      ul {
        width: 180px; /* Ширина меню */
        list-style: none; /* Для списка убираем маркеры */
        margin: 0; /* Нет отступов вокруг */
        padding: 0; /* Убираем поля вокруг текста */
        font-family: Arial, sans-serif; /* Рубленый шрифт для текста меню */
        font-size: 10pt; /* Размер названий в пункте меню */
      }
      li ul {
        position: absolute; /* Подменю позиционируются абсолютно */
        display: none; /* Скрываем подменю */
        margin-left: 165px; /* Сдвигаем подменю вправо */
        margin-top: -2em; /* Сдвигаем подменю вверх */
      }
      li a {
        display: block; /* Ссылка как блочный элемент */
        padding: 5px; /* Поля вокруг надписи */
        text-decoration: none; /* Подчеркивание у ссылок убираем */
        color: #666; /* Цвет текста */
        border: 1px solid #ccc; /* Рамка вокруг пунктов меню */
        background-color: #f0f0f0; /* Цвет фона */
        border-bottom: none; /* Границу снизу не проводим */
      }
      li a:hover {
        color: #ffe; /* Цвет текста активного пункта */
        background-color: #5488af; /* Цвет фона активного пункта */
      }
      li:hover ul {
        /* При выделении пункта курсором мыши отображается подменю */
        display: block;
      }
      .



 brd {
        border-bottom: 1px solid #ccc; /* Линия снизу */
      }
    </style>
  </head>
  <body>
    <ul>
      <li>
        <a href="russian.html">Русская кухня</a>
        <ul>
          <li><a href="linkr1.html">Бефстроганов</a></li>
          <li><a href="linkr2.html">Гусь с яблоками</a></li>
          <li>
            <a href="linkr3.html">Крупеник новгородский</a>
          </li>
          <li>
            <a href="linkr4.html"
              >Раки по-русски</a
            >
          </li>
        </ul>
      </li>
      <li>
        <a href="ukrainian.html">Украинская кухня</a>
        <ul>
          <li><a href="linku1.html">Вареники</a></li>
          <li>
            <a href="linku2.html">Жаркое по-харьковски</a>
          </li>
          <li>
            <a href="linku3.


 html">Капустняк черниговский</a>
          </li>
          <li>
            <a href="linku4.html"
              >Потапцы с помидорами</a
            >
          </li>
        </ul>
      </li>
      <li>
        <a href="caucasus.html">Кавказская кухня</a>
        <ul>
          <li><a href="linkc1.html">Суп-харчо</a></li>
          <li><a href="linkc2.html">Лилибдж</a></li>
          <li><a href="linkc3.html">Чихиртма</a></li>
          <li>
            <a href="linkc4.html">Шашлык</a>
          </li>
        </ul>
      </li>
      <li>
        <a href="asia.html"
          >Кухня Средней Азии</a
        >
      </li>
    </ul>
  </body>
</html>

В данном примере псевдокласс :hover добавляется к элементу списка (тег <li>) для создания двухуровневого меню. Результат:

См. также

  • :link
  • :visited
  • :active

Ссылки

  • Псевдо-класс :hover MDN (рус.)

CSS эффекты наведения изображения, эффекты наведения изображения, непрозрачность наведения, наложение наведения и изменение изображения наведения

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

Создание эффекта ролловера (Hover Effects)

В следующем коде показано, как отобразить эффект наведения на Box Shadow.

Наведите курсор сюда

Исходный код

Наведите мышку сюда

Эффекты наведения изображения (переворачивание изображений)

Следующий код CSS показывает, как представить эффекты наведения изображения.

Наведите указатель мыши на изображение.

Исходный код

Подробнее о CSS Shadow… Примеры CSS Shadow

Непрозрачность/прозрачность изображения CSS

Непрозрачность противоположна прозрачности, не пропускает свет. Вы можете создавать прозрачные изображения в CSS с помощью свойства opacity.

CSS Эффект затухания изображения


Эффект размытия изображения
изображение { непрозрачность: 0,3; }

Подробнее о …. Как сделать фоновые изображения прозрачными

Создание прозрачных/непрозрачных изображений — эффект наведения мыши

Следующая программа CSS показывает, как реализовать непрозрачность изображения при наведении указателя мыши. Когда вы наводите курсор мыши на изображение, вы можете видеть, что изображение исчезает.

Непрозрачность изображения при наведении

Наведите указатель мыши на изображение.

Исходный код

Наложение текста на изображение при наведении

Наложение изображений друг на друга — отличный способ придать изображению новый вид. Здесь код CSS, отображающий текст на изображении при наведении курсора мыши

Наведите указатель мыши на изображение.

Тигр — самый крупный вид кошек, достигающий общая длина тела до 3,3 м и массой до до 306 кг. Его самая узнаваемая черта — узор. темных вертикальных полос на красновато-оранжевом меху с более светлым низом.

Исходный код

Подробнее о наложении CSS… Методы наложения CSS

Тигр — самый крупный вид кошек, достигающий общая длина тела до 3,3 м и массой до до 306 кг. Его самая узнаваемая черта — узор. темных вертикальных полос на красновато-оранжевом меху с более светлым низом.

Замена изображения при наведении CSS — событие onmouseover

Следующий код CSS показывает, как изменить изображение при наведении курсора мыши. При наведении мыши один div, содержащий изображение, помещается поверх другого изображения.

Наведите указатель мыши на изображение.

Исходный код

Как наложить окно на всю страницу… Полноэкранное наложение CSS

Изменение ссылки на изображение при наведении курсора (создать эффект ролловера)

В следующем исходном коде показано, как изменить ссылку на изображение при наведении курсора мыши.

Наведите указатель мыши на ссылку изображения.

Исходный код

Раздел CSS Hover

Вы можете изменить цвет фона Div при наведении. Следующий код CSS показывает, как изменить цвет фона div при наведении.

Наведите указатель мыши на Div.

Эффекты наведения CSS Div

Исходный код

Как создать эффекты наложения изображения при наведении с помощью CSS?

Как создать эффекты наложения изображения при наведении с помощью CSS?

Как создать эффекты наложения изображения при наведении с помощью CSS?

Обзор

В изображении эффектов наведения CSS мы добавим другое изображение к основному изображению, чтобы другое изображение можно было увидеть, размывая основное изображение при наведении на него курсора. Мы достигнем этого, используя 5 различных типов эффектов наведения.

  • Фейд
  • Верхняя часть слайда
  • Нижняя часть слайда
  • Слайд влево
  • Ползун вправо

Предварительные требования

Изучение основ CSS

Изучение основ HTML

Как создать эффект наложения изображения при наведении с помощью CSS?

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

  • Он будет состоять из двух разделов, один из которых будет наложенным и будет содержать изображение, которое будет отображаться при наведении курсора на изображение.
  • Другой будет контейнером, который будет содержать как оверлей, так и изображение.

Давайте создадим базовый HTML-код, содержащий изображение. 

 
 

<голова>
    <мета-кодировка="UTF-8">
    Масштабирование изображения при наведении курсора

<тело>
   <центр>

Вывод:

Типы эффектов при наведении в CSS

Fade

В эффекте Fade , когда мы наводим курсор на изображение, наложение появляется в верхней части изображения. Здесь мы устанавливаем ширину и высоту изображения, затем мы регулируем высоту разделения контейнера, чтобы относительно второго контейнера div был эффект наложения, который создает эффект наведения на базовое изображение.

Пример из Fade эффект: 

 
 

<голова>
    <мета-кодировка="UTF-8">
    Наложение изображения
    <стиль>
    .контейнер
    {
       положение: родственник;
       ширина: 250 пикселей;
       высота: 250 пикселей;
       отображение: встроенный блок;
    }
    .изображение
    {
       дисплей: блок;
       ширина: 250 пикселей;
       высота: 250 пикселей;
    }
    .оверлей
    {
       положение: абсолютное;
       переход: все .3s легкость;
       непрозрачность: 0;
       цвет фона: #eee;
    }
    .container: наведение .overlay
    {
       непрозрачность: 1;
    }
    .эффект наложения
    {
      ширина: 250 пикселей;
      высота: 250 пикселей;
      верх:0;
      слева: 0;
      цвет фона: #00b1ba;
    }
    


<тело>
<дел>
    img
    <дел>

Результат:

Slide Top

Здесь мы создаем Slide Top эффект наложения при наведении. Здесь ширина изображения установлена ​​​​на 250 пикселей, высота установлена ​​​​на верх и ноль. Когда мы наводим курсор на изображение, эффект наведения будет постепенно перемещаться сверху вниз.

Пример эффекта Slide Top : 

 
 

<голова>
    <мета-кодировка="UTF-8">
    Наложение изображения
    <стиль>
        .контейнер изображения {
            ширина: 250 пикселей;
            высота: 250 пикселей;
        }
        .контейнер {
            положение: родственник;
            ширина: 250 пикселей;
            высота: авто;
        }
        .оверлей {
            положение: абсолютное;
            переход: все 0,3 с легкости;
            непрозрачность: 0;
            цвет фона: #eee;
        }
        .container: наведение .overlay {
            непрозрачность: 1;
        }
        .overlayTop{
            ширина: 250 пикселей;
            высота: 0;
            сверху: 0;
            справа: 0 пикселей;
            цвет фона: #00b1ba;
        }
        . container: наведение .overlayTop{
        высота: 250 пикселей;
        }
    

<тело>
        <дел>
            
            <дел>

Результат:

Slide Bottom

Здесь мы создаем Slide Bottom эффект наложения при наведении. Здесь ширина изображения установлена ​​​​на 250 пикселей, высота установлена ​​​​на низ и ноль. Когда мы наводим курсор на изображение, эффект наведения будет постепенно перемещаться снизу вверх.

пример эффекта Slide Bottom : 

 
 

<голова>
    <мета-кодировка="UTF-8">
    Наложение изображения
    <стиль>
        .изображение {
            ширина: 250 пикселей;
            высота: 250 пикселей;
        }
        .контейнер {
            положение: родственник;
            ширина: 250 пикселей;
            высота: авто;
        }
        . оверлей {
            положение: абсолютное;
            переход: все 0,3 с легкости;
            непрозрачность: 0;
            цвет фона: #eee;
        }
        .container: наведение .overlay {
            непрозрачность: 1;
        }
        .overlayBottom{
            ширина: 250 пикселей;
            высота: 0;
            внизу: 0;
            справа: 0 пикселей;
            цвет фона: #00b1ba;
        }
        .container: hover .overlayBottom {
        высота: 255 пикселей;
        }
    

<тело>
        <дел>
            
            <дел>

Результат:

Слайд влево

Здесь мы создаем эффект наложения Слайд влево при наведении. Здесь высота изображения установлена ​​​​на 250 пикселей, ширина установлена ​​​​влево и равна нулю. Когда мы наводим курсор на изображение, эффект наведения будет постепенно перемещаться слева направо.

Пример эффекта Slide Left : 

 
 

<голова>
    <мета-кодировка="UTF-8">
    Наложение изображения
    <стиль>
        .изображение {
            ширина: 250 пикселей;
            высота: 250 пикселей;
        }
        .контейнер {
            положение: родственник;
            ширина: 250 пикселей;
            высота: авто;
        }
        .оверлей {
            положение: абсолютное;
            переход: все 0,3 с легкости;
            непрозрачность: 0;
            цвет фона: #eee;
        }
        .container: наведение .overlay {
            непрозрачность: 1;
        }
        .overlayLeft{
            высота: 250 пикселей;
            ширина: 0;
            сверху: 0;
            слева: 0;
            цвет фона: #00b1ba;
        }
        .container: hover .overlayLeft{
        ширина: 250 пикселей;
        }
    

<тело>
        <дел>
             jpg"
               >
            <дел>

Результат:

Слайд вправо

Здесь мы создаем эффект наложения Слайд вправо при наведении. Здесь высота изображения установлена ​​​​на 250 пикселей, ширина установлена ​​​​на право и ноль. Когда мы наводим курсор на изображение, эффект наведения будет постепенно перемещаться справа налево.

пример эффекта Slide Right : 

 
 

<голова>
    <мета-кодировка="UTF-8">
    Наложение изображения
    <стиль>
        .изображение {
            ширина: 250 пикселей;
            высота: 250 пикселей;
        }
        .контейнер {
            положение: родственник;
            ширина: 250 пикселей;
            высота: авто;
        }
        .оверлей {
            положение: абсолютное;
            переход: все 0,3 с легкости;
            непрозрачность: 0;
            цвет фона: #eee;
        }
        .
Comments
Leave Comment