Чем заменить тег border в hover чтобы при наведение вылезало фото?

Question

[Awar]

Чем заменить тег border в hover чтобы при наведение вылезало фото или как сделать лучше?

.scroll1{
    border:2px solid rgb(0, 217, 255);
    width: 236px;
    height: 50px;
    border-radius: 50px;
    display: block;
    
}
.scroll1 h4{
    font-size: 16px;
    display: inline-block;
    color: rgb(0, 0, 0);
    margin-top: 14px;
    margin-left: 33%;

    transition: 1s;
    }
.scroll1:hover {
    border-radius: 40px;
border-bottom: solid 150px;
    transition: 1s;
}

Comments

[Ankhena]

И где в вашем коде фото? Зачем там огромный черный бордер? В общем мало, что понятно.

Оформите код в песочницу на jsfiddle.net так, чтобы была видна проблема.

Если нужно, чтобы фото перекрывало границу, сместите его, например, с помощью position relative.

[Awar]

Ankhena, Здравствуйте, в самом коде фото нет, прст хотел узнать как можно сделать выезжающие фото из колонки(При наведение курсором чтобы фотка вылезала). Возможно ли это реализовать в css ?Cам код был для наглядности... Я понимаю ,с моей стороны было не корректно вставлять неверный код сюда ,но как мне было еще показать пример? Поэтому и скинул к нему в добавок скрин чтобы хоть как то показать суть.

[Awar]

Ankhena, https://jsfiddle.net/ed320f4p/

[Ankhena]

Awar,

Возможно ли это реализовать в css ?

Да, конечно. Ставите картинку на фон псевдоэлементу и вперед.

Например, так
https://jsfiddle.net/2okdsjaf/

[Awar]

Ankhena, Спасибо большое !

Answer 1

[Владимир Ясанкин]

Написать в обработчике onmouseover присвоение атрибута src тега img