Border gradient при наведении?

Question

[Алекс]

День добрый, необходимо сделать hover с появлением границы которая задана градиентом. Перепробовал множество вариантов (множество на мой взгляд), возможно что то просмотрел.



Верстка выглядит вот так

<div class="catalog-item__poster">
    <img src="./images/main/2.jpg">
</div>

.catalog-item__poster {
    border-radius: 8px;
    position: relative;
    overflow: hidden;
    padding-top: 59.38%;
    position: relative;
}
.catalog-item__poster img {
    transition: all .2s ease-in-out;
    z-index: 2;
}
.catalog-item:hover .catalog-item__poster img {
    transform: translate(-50%, -50%) scale(1.1);
}

1) border-image не получается использовать так как углы скругленные у элемента.
2) пробовал добавить svg рамки поверх через background-image и base64 - но не получалось растянуть рамку ровно по блоку

Answer 1

[Александр Епихин]

https://css-tricks.com/gradient-borders-in-css/

Comments

[Алекс]

первые 2 примера построены на том что внутренняя область изначально меньше на несколько пикселей и обводка добавляет эту недостающую границу. У меня же изначально ее нет, она появляется сверху на изображении в тех же границах (остальные примеры не работаюь)

[Александр Епихин]

Алекс, вам нужно было развить идею. Вот пример реализации вашей задачи https://codepen.io/leshiple/pen/yLNZXmW

[Алекс]

Александр Епихин, не догнал, спасибо.

Answer 2

[profesor08]

Делается довольно просту, блоку задаешь фон градиентом и делаешь padding нужной ширины. Таким образом, весь контент, который расположишь внутри, будет не будет закрывать фон контейнера. Тем самым будет достигнут эффект.

<div>
  <img ...>
</div>

div {
  background: linear-gradien(...);
  padding: 3px;
}

Comments

[Алекс]

но так ведь если я padding укажу то у меня элементы меньше станут по факту на 4-6 пикселей

[profesor08]

Алекс, сделай контейнер больше, в чем проблема?

[Алекс]

profesor08, при любом раскладе обводка будет внешняя, а должна внутренняя, при этом нужно умит изображение

[profesor08]

Алекс, нет