Hover Effect "change your picture" with icon on profile picture

I would like to get a hover effect on my image, when the user goes over the image a background should appear on the image with some text (see example below). My css doesn't look like it at all unfortunately. It is not in the middle and the image is not round but more like an egg.

My question now is, how can I use CSS to make the image so that it is round and when going over it the text is displayed nicely in the middle.

I also use Bootstrap as an additional library, if it should be easier.

What I have:

What I want:

Pic.js

<div class="container-profilepic">
     <img src="./image.png" width="150" height="150" alt="Profibild" className="photo-preview"></img>
     <div class="middle-profilepic">
            <div class="text-profilepic"><i class="fas fa-camera"></i>
            <div class="text-profilepic">Change it
     </div>
</div>

Photo.css

    .photo-preview{
    width: 100% !important;
    max-width: 125px !important;
    height: 100% !important;
    max-height: 125px!important;
    border-radius: 50% !important;
  }

  .middle-profilepic {
    transition: .5s ease;
    opacity: 0;
    position: absolute;
    text-align: center;
  }
  
  .container-profilepic:hover .photo-preview {
    opacity: 0.3;
  }
  
  .container-profilepic:hover .middle-profilepic {
    opacity: 1;
  }
  
  .text-profilepic {
    color: green;
    font-size: 16px;
  }

I checked this question befor out How do I add animated text on these images when I hover my cursor without changing current style? Unfortunately it didn't help me.

I tried it before with top, left, postion...

  .middle-profilepic {
    transition: .5s ease;
    opacity: 0;
    text-align: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }

The result

So I removed it, because the result was much closer at what I want

Solution

You need to set the parent div with position: relative and the inner content (icon + image) as position: absolute elements, stretching to fit.

If you need the avatar image to ba an img tag you can use object-fit: cover in CSS (It has wide support nowadays: https://caniuse.com/?search=object-fit).

Tips

be careful the HTML you posted is invalid, has some broken tags
I vividly suggest you move away from using heavily !important within your CSS

Working example

body {
  font-family: sans-serif;
}

.profilepic {
  position: relative;
  width: 125px;
  height: 125px;
  border-radius: 50%;
  overflow: hidden;
  background-color: #111;
}

.profilepic:hover .profilepic__content {
  opacity: 1;
}

.profilepic:hover .profilepic__image {
  opacity: .5;
}

.profilepic__image {
  object-fit: cover;
  opacity: 1;
  transition: opacity .2s ease-in-out;
}

.profilepic__content {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: white;
  opacity: 0;
  transition: opacity .2s ease-in-out;
}

.profilepic__icon {
  color: white;
  padding-bottom: 8px;
}

.fas {
  font-size: 20px;
}

.profilepic__text {
  text-transform: uppercase;
  font-size: 12px;
  width: 50%;
  text-align: center;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/solid.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/svg-with-js.min.css" rel="stylesheet" />


<div class="profilepic">
  <img class="profilepic__image" src="https://images.unsplash.com/photo-1510227272981-87123e259b17?ixlib=rb-0.3.5&q=80&fm=jpg&crop=faces&fit=crop&h=200&w=200&s=3759e09a5b9fbe53088b23c615b6312e" width="150" height="150" alt="Profibild" />
  <div class="profilepic__content">
    <span class="profilepic__icon"><i class="fas fa-camera"></i></span>
    <span class="profilepic__text">Edit Profile</span>
  </div>
</div>