How can I styling this design only with CSS? - html

Question

I want to design the above image using pure CSS.
Following is the HTML and CSS I have come up with so far:
<div>
<input
className="my_file"
type="file"
onChange={(event) => {
setImageSelected(event.target.files[0]);
}}
/>
<svg
width="20"
height="18"
viewBox="0 0 20 18"
fill="none"
xmlns="http://www.w3.org/2000/svg"
className="upload_image_icon"
>
<path
d="M7 0L5.17 2H2C0.9 2 0 2.9 0 4V16C0 17.1 0.9 18 2 18H18C19.1 18 20 17.1 20 16V4C20 2.9 19.1 2 18 2H14.83L13 0H7ZM10 15C7.24 15 5 12.76 5 10C5 7.24 7.24 5 10 5C12.76 5 15 7.24 15 10C15 12.76 12.76 15 10 15Z"
fill="white"
/>
</svg>
<Avatar
src={picture}
alt="Avatar"
id="hello"
className="avatar--profile_image"
/>
</div>
and here is my scss:
.profile--card_container {
width: 348px;
height: 448px;
// border: 1px solid rgb(211, 211, 211);
// border-radius: 5px;
.avatar--profile_image {
justify-content: center !important;
margin-bottom: 10px;
margin-top: 10px;
margin-left: 6.50rem;
height: 100px !important;
width: 100px !important;
box-shadow: rgba(0, 0, 0, 0.01) 0px 5px 16px 0px,
rgba(0, 0, 0, 0.10) 0px 0px 0px 0px;
position: relative;
overflow: hidden;
background-size: cover;
background-position: center;
background-blend-mode: multiply;
color: transparent;
transition: all .3s ease;
cursor: pointer;
border: 2px solid rgba(0, 0, 0, 0.54);
&:after {
content:'\A';
position:absolute;
width:100%; height:100%;
top:0; left:0;
background:rgba(0,0,0,0.6);
opacity:0;
transition: all 0.5s;
-webkit-transition: all 0.5s;
}
&:hover:after {
opacity:1;
}
}
input[type=file]::-webkit-file-upload-button {
cursor: pointer;
}
.my_file {
position: absolute;
outline: none;
color: transparent;
box-sizing: border-box;
transition: 0.5s;
margin: 45px 0 0 100px;
z-index: 1;
opacity: 0;
cursor: pointer;
}
.upload_image_icon {
margin: 44px 0 0 144px;
cursor: pointer;
position: absolute;
outline: none;
box-sizing: border-box;
z-index: 1;
}
}
here is how my result look like for now:
I am trying to achieve like when I hover profile picture the image will overlay black color and appear camera icon. How can I do that ?

Answer 1

Wrap the image within a div. and then use a pesudo-element with a z-index that onyl dispalys when you hover that div like in the snippet below:
.avatar {
width: 100px;
height: 100px;
position: relative;
}
.avatar img {
width: 100%;
object-fit: cover;
border-radius: 50%;
}
.avatar > div {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
border-radius: 50%;
background-color: rgba(0, 0, 0, 0.6);
z-index: 2;
display: none;
}
.avatar:hover > div {
display: flex;
justify-content: center;
align-items: center;
}
<div class="avatar">
<img src="https://via.placeholder.com/500x500.jpg">
<div>Icon</div>
</div>