Change image icon appears on hover but disappears with every mouse move

Natalie Shamir 0
Viewed 21

.profile__change-image-button should appear on hover (while the image changes opacity to 0.8) and clicking on it is supposed to open a form. With my current code, opacity is applied on hover and the icon does appear, but it disappears with every move of the mouse, which it makes it difficult to open the popup form. The end result should be- opacity changed to 0.8 on hover + icon appear and disappear only when the mouse moves outside the borders of the image. Thank you very much in advance!

.profile__user {
  max-width: 583px;
  display: flex;
  position: relative;
}

.profile__image {
  background-size: cover;
  background-position: center;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.profile__change-image-button {
  width: 26px;
  height: 26px;
  background: transparent;
  border: none;
  position: absolute;
  left: 47px;
  bottom: 56px;
}

.profile__change-image-button-hide {
  display: none;
}

.profile__image:hover {
  opacity: 0.8;
}

.profile__image:hover + .profile__change-image-button-hide {
  display: block;
}
        <div class="profile__user">
          <div
            class="profile__image"
            title="An image of the French oceanographer- Jacques Cousteau"
          ></div>
          <div class="profile__change-image-button-hide">
            <button type="button" class="profile__change-image-button">
              <img
                src="<%=require('./images/edit-profile-icon.svg')%>"
                alt="A vector image of a pen inside the profile image"
                class="profile__change-image-icon"
              />
            </button>
          </div>
          <div class="profile__info">
            <h1 class="profile__title"></h1>
            <button type="button" class="profile__edit-button">
              <img
                src="<%=require('./images/button-edit.svg')%>"
                alt="A vector image of a pen inside the edit button"
                class="profile__edit-icon"
              />
            </button>
            <p class="profile__subtitle"></p>
          </div>
        </div>

css html
1 Answers

There is a lot of html and css rules going on so I simplified the code to give what I believe you are looking to do. Also I've imported an icon font to get the button image you described. It's not a vector graphic but it can be with a simple change.

@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.9.1/font/bootstrap-icons.css");
.profile__user {
  position: relative;
  display: inline-block;
}

.profile__image {
  background-image: url("https://picsum.photos/id/1027/120");
  height: 120px;
  width: 120px;
  border-radius: 50%;
  border: none;
  opacity: 1;
  transition: opacity .5s;
}

.profile__change-image-button {
  position: absolute;
  height: 24px;
  width: 24px;
  bottom: 16px;
  right: 16px;
  padding: 4px;
  border-radius: 5px;
  border: none;
  opacity: 0;
  transition: opacity .5s;
}

.profile__image:hover {
  opacity: .8;
}

.profile__image:hover .profile__change-image-button {
  opacity: 1;
}
<div class="profile__user">
  <div class="profile__image" title="An image of the French oceanographer- Jacques Cousteau">
    <button type="button" class="profile__change-image-button">
      <i class="bi bi-pencil-square"></i>
    </button>
  </div>
</div>

fnostro0
Related