• Страница 1 из 1
  • 1
Форум » Web-Раздел » Начинающему вебмастеру » Создать рамку на изображение при наведении (Как сделать красивую рамку к изображению при наведении?)
Создать рамку на изображение при наведении
Kosten
Дата: Суббота, 2019-09-21, 01:14 | Сообщение 1
Оффлайн
Администраторы
Сообщений:25011
Награды: 57


В материале создадим стильную рамку, что будет появляться вокруг картинки, так как такой эффект рамки строится при помощи всем известного свойства, как border, где мы будем добавлять к селектору img. Для того, чтоб рамка показывалась только тогда, когда курсор наведен на заданный элемент, а точнее на изображение, то здесь следует задействовать псевдоклассом :hover, где показано на demo странице.



HTML

Код
<img src="http://zornet.ru/_fr/83/9288013.jpg" alt="">

CSS

Код
   img {
    border: 2px solid transparent;
   }
img:hover {
    border-color: #577cc5;
    border-radius: 8px;
}

Также есть возможность прописать класс и уже под него все выстроить в CSS.

Демонстрация
Прикрепления: 7401763.png(32.2 Kb)
Страна: (RU)
Форум » Web-Раздел » Начинающему вебмастеру » Создать рамку на изображение при наведении (Как сделать красивую рамку к изображению при наведении?)
  • Страница 1 из 1
  • 1
Поиск: