Нужен эффект прокрутки (слева направо) для значка Chat Assistant в пользовательском интерфейсе

Question

Я ищу эффект прокрутки для значка Chat Assistant Icon, который должен работать следующим образом:

1. Значок должен изначально находиться с правой стороны окна, (float: right and sayпримерно на 10 пикселей сверху.)
2. Когда мышь наводит на нее, значок должен расширяться, как показано на изображении.
3. Когда мышь наводит курсор на иконку, она должна возвращаться кисходное положение.
4. Положение значка должно быть фиксированным / фиксированным, даже когда пользователь прокручивает страницу вверх / вниз. Я прилагаю два скриншота, которые показывают положение перед наведением и при наведении. Не могли бы вы рассказать, как этого добиться, используя HTML, CSS3 и JQuery (или собственный Java Script). Не стесняйтесь использовать любое фиктивное изображение / текст для демонстрационных целей. Спасибо.

Answer 1

Добавьте этот код и, пожалуйста, измените путь к изображению ..

HTML

<a href="#" class="back-top">
    <img src="icon.png" alt="">
    <h5>Virtual Assistant</h5>
</a>

CSS

.back-top {
    border: 1px solid #429dd8;
    position: fixed;
    right: 0;
    top: 10px;
    z-index: 9;
    border-right: none;
    padding: 10px;
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
    text-decoration: none;
    color: #000;
}
.back-top img {
    display: inline-block;
    vertical-align: middle;
}
.back-top h5 {
    display: inline-block;
    vertical-align: middle;
    font-size: 0px;
    transition: 0.5s all ease 0s;
}
.back-top:hover h5 {
    font-size: 16px;
    transition: 0.5s all ease 0s;
}