center icon + text on css hovered image - html

Question

good day, i am trying to center my icon and text when i hover an image. my problem is that they dont seem to center themselves. ill show both my html and css. also, i am using bootstrap 4. i tried to center both the icon and text using the "overlay" and "overlay-text" tag but both are suspended at the top. any help would be appreciated.
Code:
.overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 100%;
width: 100%;
opacity: 0;
transition: .5s ease;
background-color: #f08300;
}
.container:hover .overlay {
opacity: 1;
}
.overlay-text {
color: white;
font-size: 20px;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
text-align: center;
}
.spacer {
margin: 20px 0px 20px 0px;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-md-12 text-align-center">
<h2 class="bold_font">BROWSE OUR CARDS</h2><br>
</div>
<div class="col-md-4 col-xs-12">
<img class="img-responsive" src="img/_stock_mwc_beauty.jpg">
<div class="overlay">
<img src="img/icon-beauty-white.png" class="img-responsive center-block card-icon-sm">
<div class="spacer overlay-text">BEAUTY</div>
</div>
</div>
<div class="col-md-4 col-xs-12">
<img class="img-responsive" src="img/_stock_mwc_health.jpg">
</div>
<div class="col-md-4 col-xs-12">
<img class="img-responsive" src="img/_stock_mwc_wellness.jpg">
</div>
</div>
</div>

Answer 1

You are on the right track, Wrap the content of what you want to show on the overlay and add CSS to that and adjust the images and text accordingly.
.overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 100%;
width: 100%;
opacity: 0;
transition: .5s ease;
background-color: #f08300;
}
.container:hover .overlay {
opacity: 1;
}
.overlay-content {
color: white;
font-size: 20px;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
text-align: center;
}
.spacer {
margin: 20px 0px 20px 0px;
}
<div class="container">
<div class="row">
<div class="col-md-12 text-align-center">
<h2 class="bold_font">BROWSE OUR CARDS</h2><br>
</div>
<div class="col-md-4 col-xs-12">
<img class="img-responsive" src="img/_stock_mwc_beauty.jpg">
<div class="overlay">
<div class="overlay-content">
<img src="img/icon-beauty-white.png" class="img-responsive center-block card-icon-sm">
<div class="spacer overlay-text">BEAUTY</div>
</div>
</div>
</div>
<div class="col-md-4 col-xs-12">
<img class="img-responsive" src="img/_stock_mwc_health.jpg">
</div>
<div class="col-md-4 col-xs-12">
<img class="img-responsive" src="img/_stock_mwc_wellness.jpg">
</div>
</div>
</div>

Answer 2

Try to using flexboxes for a container and wrap icon and icon-text to div with class e.g. .icon-wrapper:
.overlay {
display: flex;
justify-content: center;
align-items: center;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 100%;
width: 100%;
opacity: 0;
transition: .5s ease;
background-color: #f08300;
}
.overlay-text {
color: white;
font-size: 20px;
text-align: center;
}
.icon-wrapper {
display: flex;
flex-direction: column;
align-items: center;
}

Answer 3

You could wrap the image content together in a relative element and remove absolute position from the text.
something like this: http://jsfiddle.net/tus0kdcq/
update: http://jsfiddle.net/jimmyLi/kruz6eqn

Answer 4

pls try this css:
<style>
.overlay{
display: flex;
align-items: center;
flex-direction: column;
justify-content: center;
}
</style>