ZorNet.Ru — сайт для вебмастера » HTML и CSS » Эффект появление рамки на картинки в CSS

Эффект появление рамки на картинки в CSS

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

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

1. Вариант на пунктирную линию:

Эффект появления рамки при наведении на CSS3

HTML

Код
<img src="Ссылка на первое изображение" alt="ZorNet.Ru — сайт для вебмастера"/>

CSS

Код
img:hover {
  outline: 1px dashed #401d11; /* Ширина, вид и цвет рамки */
  outline-offset: -8px; cursor:pointer; /* Выводим рамку внутри элемента */
}

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

Демонстрация

2. Вариант на сплошную линию:

Всплывающая рамка CSS на изображение

HTML

Код
<img src="Ссылка на второе изображение" alt="" title="Форум ZorNet.Ru"/>

CSS

Код
img:hover {
  border: 2px solid #1a1919; cursor:pointer; /* Ширина, вид и цвет рамки */
}

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

Демонстрация
15 Февраля 2022 Загрузок: 3 Просмотров: 1338 Комментариев: (2)
Поделиться в социальных сетях

Материал разместил
Kosten
Похожие материалы

Оставь свой отзыв

Комментарии: 2
Snoopak
Snoopak 16 Февраля 2022 19:461
+1
Вариант конечно хороший, но не учтено, что при наводке (:hover) дергается, так как меняется размер элемента. Есть несколько вариантов решения проблемы (имхо):
- можно сделать костыль - прозрачная обводка в обычном состоянии.
Тогда толщина обводки учитывается в размере всего элемента.
- Есть ещё вариант - это делать обводку при помощи тени (box-shadow), что позволяет не писать костыли.
Вот наглядный пример реализации - https://u.to/-1kCHA
Kosten
Kosten 16 Февраля 2022 19:492
0
Snoopak, в описание упоминал через класс, но только в плане оформление. Snoopak если есть время и настроение, сделай на первый, я перекину в материал, и автора поменяю изменю.
Войдите:
avatar