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

Question

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

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

user_995818 · Answer

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;
}







  
  
    
    Edit Profile

user_6647673 · Answer

Solution

Create a container with relative position and fixed height and width
Add an image as a background image respective to the container size
Add content with position: absolute

solution using bootstrap-5

        .container-profilepic {
            width: 150px;
            height: 150px;
        }
        .photo-preview {
            background-image: url( https://images.unsplash.com/photo-1531427186611-ecfd6d936c79?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80 );
            background-size: cover;
            background-position: center;
        }
        .middle-profilepic {
            background-color: rgba( 255,255,255, 0.69 );
        }
        .container-profilepic:hover .middle-profilepic {
            display: flex!important;
            cursor: pointer;
        }

user_14872716 · Answer

.image {
position: relative:
}
.text-div {
position: abolute;
top: 10px;
left:40%;
}

Also img tag it's self-closing tag

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

3 Answers

Solution

Tips

Working example

Solution