how to fit overlay to exact size of the image? - html

Question

I'm trying to use overlay effect for the images, but I'm not able to fit it exactly to the size of the image.
here is my link to code pen: https://codepen.io/saisree/pen/OmKMgm
<div class="row">
<header class="text-center sec-heading">
<h2>Meet the Family</h2>
<span class="subheading">We are the ones!</span>
</header>
<div class="a col-lg-4 col-md-6 mb-sm-50">
<img style="height:100%;width:100%;" class="a img-responsive" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRsl7JTXK1z2ZomjuzpU49t7TlSMdYcioHrQLvHjmuM_3r5oc36" />
<div class="overlay">
<div class="text">Hello World</div>
</div>
</div>
</div>
Here is the CSS:/* .
.myjumbotron{
background-color: black;
} */
#over img {
margin-left: auto;
margin-right: auto;
display: block;
}
.jumbotron {
background-image: url("https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRygQnWzs3GfysYKie99aTXhbYvGrS7gxQzTAFFu9DN4azC_nwz");
background-position: center;
background-size: cover;
}
h3{
text-color:black;
}
#family h2{
color: black;
text-decoration:none;
}
#Nav h3{
color: black;
text-decoration:none;
}
/* .wrapper {
position: relative;
padding: 0;
width:100px;
display:block;
}
.text {
position: absolute;
top: 0;
color:#f00;
background-color:rgba(255,255,255,0.8);
width: 100px;
height: 100px;
line-height:100px;
text-align: center;
z-index: 10;
opacity: 0;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.text:hover {
opacity:1;
}
img {
z-index:1;
}
*/
.text {
white-space: nowrap;
color: black;
font-size: 20px;
position: absolute;
overflow: hidden;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
}
.a:hover .overlay {
height: 100%;
}
.b:hover .overlay {
height: 100%;
}
.overlay {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background-color: white;
overflow: hidden;
width:100%;
height: 0;
transition: .5s ease;
}
/* .team-item {
display:inline-block;
background:red;
margin-bottom:10px;
}
*/
Any kind of help would be highly appreciated!

Answer 1

You forgot to give position: relative; to the parent, please just add:
.a {
position: relative;
}
#over img {
margin-left: auto;
margin-right: auto;
display: block;
}
.jumbotron {
background-image: url("https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRygQnWzs3GfysYKie99aTXhbYvGrS7gxQzTAFFu9DN4azC_nwz");
background-position: center;
background-size: cover;
}
h3{
text-color:black;
}
#family h2{
color: black;
text-decoration:none;
}
#Nav h3{
color: black;
text-decoration:none;
}
.text {
white-space: nowrap;
color: black;
font-size: 20px;
position: absolute;
overflow: hidden;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
}
.a {
position: relative;
}
.a:hover .overlay {
height: 100%;
}
.b:hover .overlay {
height: 100%;
}
.overlay {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background-color: white;
overflow: hidden;
width:100%;
height: 0;
transition: .5s ease;
}
<div class="row">
<header class="text-center sec-heading">
<h2>Meet the Family</h2>
<span class="subheading">We are the ones!</span>
</header>
<div class="a col-lg-4 col-md-6 mb-sm-50">
<img style="height:100%;width:100%;" class="a img-responsive" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRsl7JTXK1z2ZomjuzpU49t7TlSMdYcioHrQLvHjmuM_3r5oc36" />
<div class="overlay">
<div class="text">Hello World</div>
</div>
</div>
</div>

Answer 2

So you can see how this works, I've stripped back your CSS to focus on exactly what's needed here.
I think you should wrap both the image and the overlay div in an another element, which I've given the class inner-wrap as below. This element should be position: relative since it is the parent of both the image and the overlay.
You can then give the overlay position: absolute so it is placed in accordance with the parent. I've stretched it across the entirety of the parent and added a translucent background colour so you can see what's going on easier.
.inner-wrap {
position: relative;
}
.overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(255,255,255,0.4);
text-align: center;
}
<div class="row">
<header class="text-center sec-heading">
<h2>Meet the Family</h2>
<span class="subheading">We are the ones!</span>
</header>
<div class="a col-lg-4 col-md-6 mb-sm-50">
<div class="inner-wrap">
<img style="height:100%;width:100%;" class="a img-responsive" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRsl7JTXK1z2ZomjuzpU49t7TlSMdYcioHrQLvHjmuM_3r5oc36" />
<div class="overlay">
<div class="text">Hello World</div>
</div>
</div>
</div>
</div>