NFT preview card component

Hello Friends,

I got a few questions!! sorry for the long question :( ...

1. To display the hover/focus styles when hovering over the cube image, I've initially added the hover styles using the ::before pseudo-element and set the opacity to 0. Then set the opacity to 1 when hovered. (Continuation of the question after code block).

<div class="avatar">
          <img
            class="cube-img"
            src="./images/image-equilibrium.jpg"
            alt="image of cube balanced on one of it's vertex and at equilibrium"
          />
</div>

.avatar::before {
  content: url("./images/icon-view.svg");
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgba(0, 255, 247, 0.6);
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  opacity: 0;
  transition: opacity 0.1s ease-in;
}

.avatar:hover {
  cursor: pointer;
}

.avatar:hover::before {
  opacity: 1;
}

I initially did .avatar:hover .avatar::before { opacity: 1;} instead of .avatar:hover::before { opacity: 1;} as I thought .avatar:hover .avatar::before { opacity: 1;} meant when you hover over the .avatar div changes will be made .avatar::before, but nothing changed. Could someone explain why my initial code/ thinking was incorrect?

1. In my HTML, I added the raw SVG code using <svg> to display the SVG image. Is there any other alternative?

2. Any best coding practices I can improve on?

Please let me know anything else I haven't mentioned above and could improve.

THANKS IN ADVANCE (: