Reputation: 435
I have the following image and I want to display a circular overlay when hovering on it. Now it is oval shape. How can I do it ?
.container {
position: relative;
width: 50%;
}
.overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 100%;
width: 100%;
border-radius: 100%;
opacity: 0.5;
transition: .5s ease;
background-color: rgb(186, 68, 0);
}
.container:hover .overlay {
opacity: 1;
}
.text {
color: white;
font-size: 20px;
font-weight: bold;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
text-align: center;
}
<div class="container">
<img src="../assets/images/pathologiessmall.jpeg" width="130" height="130" class="image" />
<div class="overlay">
<div class="text">Hello World</div>
</div>
</div>
This is the code. Is the issue with the text or the overlay. For me, it's obviously the overlay. I have to write it here because else I cannot post because this textbox doesn't allow me to post. So I think it is regrettable that I have to tell my life story because of stack overflow rules.
Upvotes: 1
Views: 882
Reputation: 10091
I think this is what you want to do: (I only added size in px in your container
's CSS to match your image size)
.container {
position: relative;
width: 130px; /* Modified */
height: 130px; /* Added */
}
.overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 100%;
width: 100%;
border-radius: 100%;
opacity: 0.5;
transition: .5s ease;
background-color: rgb(186, 68, 0);
}
.container:hover .overlay {
opacity: 1;
}
.text {
color: white;
font-size: 20px;
font-weight: bold;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
text-align: center;
}
<div class="container">
<img src="../assets/images/pathologiessmall.jpeg" width="130" height="130" class="image" />
<div class="overlay">
<div class="text">Hello World</div>
</div>
</div>
Upvotes: 1
Reputation: 435
Thanks all.
@Takit Isy, I've played with your answer and had to add left : 10% on overlay. I'll see if it works if I add more images, but the idea is good. Thanks again !
.container {
position: relative;
width: 150px; /* Modified */
height: 130px;
}
.overlay {
position: absolute;
top: 0;
bottom: 0;
left: 10%;
right: 0;
height: 100%;
width: 100%;
border-radius: 100%;
opacity: 0.5;
transition: .5s ease;
background-color: rgb(186, 68, 0);
}
Upvotes: 0
Reputation: 972
You should set proportional width and height to with 1:1 proportion
1) you can set up manually width and height equal to image
2) you can set width equal to height like this
.overlay {
height: 100%;
width: height: calc(width);
}
Upvotes: 0