Make child div occupy full size of parent div - html

Question

HTML FILE:
<div class="one">
<div class="two">
<h2>ITEM NAME</h2>
</div>
</div>
CSS:
html, body {
height: 100%;
width: 100%;
}
.one{
display:block;
position: relative;
margin-left:auto;
margin-right:auto;
width:50%;
height:325px;
background-image: url('http://hd.wallpaperswide.com/thumbs/lion_5-t2.jpg');
background-size:cover;
}
.two{
position:absolute;
display:inline-block;
width:100%;
height:100%;
background-color: gray;
transition: all 0.3s ease-out;
}
.two h2{padding-top: 20%;}
I want to make a hover transition effect, just like this website:
Here
You can see in portfolio when you hover the link another light-blue div expands. I guess it's using transform: scale() I tried to do something like that, but the second div is overpassing the size of the parent div. How may I fix that? What am I doing wrong?
Also, I have my codepen sample.

Answer 1

The image of the lion you are using has a transparent background which appears along the edges, giving the impression that div one is actually smaller than it is. Set the background on the div one to a background colour instead of an image, and you will see what i mean.

Answer 2

i holp to help:
.one{
display:block;
position: relative;
margin-left:auto;
margin-right:auto;
width:510px;
height:330px;
background-image: url('http://hd.wallpaperswide.com/thumbs/lion_5-t2.jpg');
background-size:cover;
border:1px solid blue;
}
.two{
position:absolute;
display:block;
width:10%;
height:10%;
background-color: gray;
transition: all 0.3s ease-out;
margin-left:50%;
margin-top:30%;
opacity:0;
border-radius:100px;
}
.two h2{margin-top: 20%; margin-left:20%;}
.one:hover .two{
display:inline-block;
opacity: 1;
width:100%;
height:100%;
-webkit-transform: scale(1);
margin:0px !important;
border-radius:2px !important;
}