Overlay appear on Hover - Pure CSS - html

Question

As you can see in the following snippet, I have a category-box and on the hover event of that box I want appear a overlay.
Here is the CODEPEN
The problem here is, I want the overlay to start from the middle of the category-box and appear. But here as you can see it start from somewhere in the middle.
.category-box {
padding: 15px 0;
position: relative;
}
.category-img {
overflow: hidden;
}
.category-img img {
width: 100%;
object-fit: cover;
object-position: center;
-webkit-transition: ease 0.4s all;
-moz-transition: ease 0.4s all;
-ms-transition: ease 0.4s all;
transition: ease 0.4s all;
}
.category-big-box .category-img img {
height: 500px;
}
.category-content {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
background-color: #000000;
color: white;
padding: 25px;
text-align: center;
min-width: 260px;
min-height: 125px;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
justify-content: center;
align-items: center;
z-index: 1;
}
.category-overlay {
position: absolute;
left: 0;
height: 0;
width: 0;
background-color: rgba(0, 0, 0, 0.45);
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
-webkit-transition: ease 0.4s all;
-moz-transition: ease 0.4s all;
-ms-transition: ease 0.4s all;
transition: ease 0.4s all;
}
.category-big-box:hover .category-overlay {
top: 15px;
transform: none;
left: 0;
}
.category-box:hover .category-overlay {
height: calc(100% - 30px);
width: 100%;
}
.category-box:hover .category-img img {
-webkit-transform: scale(1.2);
-moz-transform: scale(1.2);
-ms-transform: scale(1.2);
transform: scale(1.2);
}
<div class="category-box category-big-box">
<div class="category-img">
<img src="https://timeless-dubai.com/wp-content/uploads/2018/07/i3.jpg" alt="Category Image">
</div>
<div class="category-content">
some content
</div>
<div class="category-overlay"></div>
</div>

Answer 1

You can just remove transform: translate(-50%, -50%); on .category-overlay:
.category-box {
padding: 15px 0;
position: relative;
}
.category-img {
overflow: hidden;
}
.category-img img {
width: 100%;
object-fit: cover;
object-position: center;
-webkit-transition: ease 0.4s all;
-moz-transition: ease 0.4s all;
-ms-transition: ease 0.4s all;
transition: ease 0.4s all;
}
.category-big-box .category-img img {
height: 500px;
}
.category-content {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
background-color: #000000;
color: white;
padding: 25px;
text-align: center;
min-width: 260px;
min-height: 125px;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
justify-content: center;
align-items: center;
z-index: 1;
}
.category-overlay {
position: absolute;
left: 0;
height: 0;
width: 0;
background-color: rgba(0, 0, 0, 0.45);
top: 50%;
left: 50%;
/*-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);*/
-webkit-transition: ease 0.4s all;
-moz-transition: ease 0.4s all;
-ms-transition: ease 0.4s all;
transition: ease 0.4s all;
}
.category-big-box:hover .category-overlay {
top: 15px;
transform: none;
left: 0;
}
.category-box:hover .category-overlay {
height: calc(100% - 30px);
width: 100%;
}
.category-box:hover .category-img img {
-webkit-transform: scale(1.2);
-moz-transform: scale(1.2);
-ms-transform: scale(1.2);
transform: scale(1.2);
}
<div class="category-box category-big-box">
<div class="category-img">
<img src="https://timeless-dubai.com/wp-content/uploads/2018/07/i3.jpg" alt="Category Image">
</div>
<div class="category-content">
some content
</div>
<div class="category-overlay"></div>
</div>
If you want to be 100% sure that an absolute positioned element is centered, you can use these properties:
/* Center horizontally */
right: 0;
left: 0;
margin: auto;
/* Center vertically */
top: 50%;
transform: translateY(-50%);
#container {
width: 100px;
height: 100px;
background: red;
position: relative;
}
#child {
width: 30px;
height: 30px;
background: yellow;
position: absolute;
right: 0;
left: 0;
margin: auto;
top: 50%;
transform: translateY(-50%)
}
<div id="container">
<div id="child"></div>
</div>

Answer 2

in .category-overlay use this
top: calc(50% + 88px);
left: calc(50% + 155px);
The 88px and 155px are half of the box size so it should be the middle of your content.
.category-box {
padding: 15px 0;
position: relative;
}
.category-img {
overflow: hidden;
}
.category-img img {
width: 100%;
object-fit: cover;
object-position: center;
-webkit-transition: ease 0.4s all;
-moz-transition: ease 0.4s all;
-ms-transition: ease 0.4s all;
transition: ease 0.4s all;
}
.category-big-box .category-img img {
height: 500px;
}
.category-content {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
background-color: #000000;
color: white;
padding: 25px;
text-align: center;
min-width: 260px;
min-height: 125px;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
justify-content: center;
align-items: center;
z-index: 1;
}
.category-overlay {
position: absolute;
left: 0;
height: 0;
width: 0;
background-color: rgba(0, 0, 0, 0.45);
top: calc(50% + 88px);
left: calc(50% + 155px);
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
-webkit-transition: ease 0.4s all;
-moz-transition: ease 0.4s all;
-ms-transition: ease 0.4s all;
transition: ease 0.4s all;
}
.category-big-box:hover .category-overlay {
top: 15px;
transform: none;
left: 0;
}
.category-box:hover .category-overlay {
height: calc(100% - 45px);
width: 100%;
}
.category-box:hover .category-img img {
-webkit-transform: scale(1.2);
-moz-transform: scale(1.2);
-ms-transform: scale(1.2);
transform: scale(1.2);
}
<div class="category-box category-big-box">
<div class="category-img">
<img src="https://timeless-dubai.com/wp-content/uploads/2018/07/i3.jpg" alt="Category Image">
</div>
<div class="category-content">
some content
</div>
<div class="category-overlay"></div>
</div>