Полупрозрачный бордюр на CSS

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

HTML:

HTML код в обоих примерах одинаковый

Помещаем картинку в блок, для которого псевдоклассом делаем бордюр с прозрачностью в RGBA

Пример 1:

CSS:

Пример 2:

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

CSS:

Автор фотографии LeeRosario

Смотрите также:

Masonry сетка на CSS

Вариант каменной кладки блоков и изображений без использования JS

Добавить комментарий:

Ваш комментарий отправлен!