HTML:
HTML код в обоих примерах одинаковый
|
1 2 3 |
<div class="op-border"> <img src="image.jpg" /> </div> |
Помещаем картинку в блок, для которого псевдоклассом делаем бордюр с прозрачностью в RGBA
Пример 1:
CSS:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
.op-border { position: relative; } .op-border:before { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; border: 20px solid rgba(51, 122, 183, 0.4); } .op-border img { width: 100%; } |
Пример 2:
В этом примере используем второй бордюр, который показывается при наведении мыши.
CSS:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
.op-border { position: relative; } .op-border:before, .op-border:after { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; border: 20px solid rgba(51, 122, 183, 0.4); transition: border-width 0.2s; } .op-border:after { border-width: 0; } .op-border:hover:after { border-width: 40px; } .op-border img { width: 100%; } |
Автор фотографии LeeRosario
Добавить комментарий: