Как сделать появление карандашика при наведении?

Question

[LI4NOOST]

<section class="profile">
            <img class="profile__avatar" src="<%=require('./images/jpg/kysto.jpg')%>" alt="Кусто">
            <article class="profile__info">
                <div class="profile__heading">
                    <h1 class="profile__name">Жак-Ив Кусто</h1>
                    <button type="button" class="profile__edit-button"></button>
                </div>
                <p class="profile__subtitle">Исследователь океана</p>
            </article>
            <button type="button" class="profile__add-button"></button>
        </section>
        <section class="elements">

.profile__avatar {
    max-width: 168px;
    max-height: 127px;
    border-radius: 50%;
    margin: 0 30px 0 0;
    cursor: pointer;
    position: relative;
    z-index: 1;
}

@media screen and (max-width: 879px) {
    .profile__avatar {
        margin: 0 auto;
    }
}
.profile__avatar:hover::before{
    content: url("../../../images/vector/pansel.svg");
    position: absolute;
    z-index: 3;
    top: 50%;
    left: 50%;
    background-color: black;
}

Нужно, что бы при наведении на аватар, появлялась svg картинка. В devtools показывается, что при наведении что то происходит, но посмотреть не могу, так как убираю курсор и все пропадает... Картинки поверх, почему то так и не видно

Comments

[Ankhena]

С фокусом аналогично

[LI4NOOST]

Ankhena, Да уже понял, что картинка добавилась. Спасибо. Но как вытащить ее поверх изоображения аватарки?

[Ankhena]

LI4NOOST,
1. У img, по спеке, псевдо есть только тогда, когда не загрузилась картинка
2. Вот же кнопка для редактирования

<button type="button" class="profile__edit-button"></button>

. Почему вы делаете карандашик псевдо от картинки??

[LI4NOOST]

Ankhena, Кнопка редактирования у меня отвечает за изменения имени профиля, а карандашик должен появляться для изменения аватарки. И нужно, что бы он появлялся при ховере на картинку

[Ankhena]

LI4NOOST, действие = кнопка = <button>
Не псевдо..

[LI4NOOST]

Ankhena, И правда. А как тогда закинуть кнопку в тег IMG, если он одиночный?

[Ankhena]

LI4NOOST, эммм... сделать карточку гридом.
Либо разместить поверх картинки абсолютом.
Либо обернуть их вместе во что-нибудь и снова гридами или абсолютами.

Гриды тут лучше.

[LI4NOOST]

Ankhena, спасибо