Не понятный border-radius hover?

Question

[ART4]

Добрый день, подскажите ребята куда рыть, уже реально запутался.
Есть 3 блока ссылка
В первом блоке, при наведение появляется border, но хочу его закруглить как блок закруглён.
Вот пример какой должен быть на hover

Уже не знаю как сделать((

Comments

[Олег]

так и не понял вашей идеи покажите 2 состояния, исходное и конечное, чтоли

[ART4]

Олег, Сейчас вот так

А надо вот так


Тобишь при наводке на блок, появлялся такой border разноцветный

Первое фото с ссылки, 2 фото это из файла psd

[Henxed]

ART4, сделайте просто 2 слоя. Нижний background с градиентом, а сверху - белый. И когда наводите, белый чуть убирается или наоборот, нижний чуть увеличивается.

Answer 1

[ART4]

В общем решил проблему.
Сделал класс, назвал его .box
Потом пошёл в js и вставил код, который вставляет class при hover.

Comments

[Олег]

border-radius забыли накрутить, у вас верхний край контент блока на hover жутковато выглядит

[Rustam Bainazarov]

Нафига тут JS?

[Сергей Горячев]

SmthTo, дешевые понты :)

[Froggyweb]

правый нижний угол бордера. О, майн гот!!!
Анимация у.... сделай что-нибудь одно, то ли цвет бордера, то ли масштабирование картинки. Текст лучше не трогать.

[Rustam Bainazarov]

Сергей Горячев, скорее простое незнание, к счастью.

[ART4]

SmthTo, скорее просто если так написал, значит надо, это задание обычное (как домашка)

[Rustam Bainazarov]

ART4, значит, плохое решение у вас данного задания. Это делается с помощью CSS на раз.

[Rustam Bainazarov]

ART4, ловите:

[ART4]

SmthTo, да есть такое спасибо. но в задание сказали и js и css так вот почему такой вопрос))

Answer 2

[Олег]

Сделайте блок-оверлей, с фоном градиентным и закруглением, как у основного блока.
Блок с контентом сделайте тоже с закруглением и той же ширины-высоты, поместите его внутрь блока с фоном.
На hover - уменьшите ширину/высоту блока с контентом и margin-left/margin-top

Answer 3

[Филипп Гапоненко]

box-shadow: 0 0 0 12px red;
это оно?

Comments

[ART4]

Сейчас я заменил это на border смотрите. Вот этот чёрный, должен быть разноцветный

[Филипп Гапоненко]

border: 5px solid;
  border-image: linear-gradient(#f6b73c, #4d9f0c) 30;

[ART4]

Филипп Гапоненко, Да я так пробовал, только углы закруглённые должны))