Overlaying multiple div pictures - css

Question

So I am trying to make a loop of images that has description overlaying each of it. The overlay would be visible when the picture is hovered. Here is an example of the code.
.container {
height: 100px;
width:100px;
display: inline-block;
}
.picture {
height: 100%;
width:100%
}
.contAlign {
text-align: center;
}
.desc {
position:flex;
bottom: 0;
left: 0;
right: 0;
background-color: black;
width: 100%;
height: 0%;
opacity: 0.5;
transition: .5s ease;
}
.container:hover .desc {
height: 40%;
}
<div class="contAlign">
<div class="container">
<img class="picture" src="https://kbob.github.io/images/sample-3.jpg">
<div class="desc"></div>
</div>
<div class="container">
<img class="picture" src="https://imagej.nih.gov/ij/images/baboon.jpg">
<div class="desc"></div>
</div>
<div class="container">
<img class="picture" src="https://www.visioncritical.com/wp-content/uploads/2014/12/BLG_Andrew-G.-River-Sample_09.13.12.png">
<div class="desc"></div>
</div>
</div>
In this case, the description box goes downwards since I wasnt using position: absolute;. However if I do so, the box wont inherit the pictures size and takes the size of the page. How do I solve this?
FIDDLE

Answer 1

Set the position of container to relative so the description would be absolute in relation to it:
.container {
height: 100px;
width:100px;
display: inline-block;
position:relative;
}
.picture {
height: 100%;
width:100%
}
.contAlign {
text-align: center;
}
.desc {
position:absolute;
bottom: 0;
left: 0;
right: 0;
background-color: black;
width: 100%;
height: 0%;
opacity: 0.5;
transition: .5s ease;
}
.container:hover .desc {
height: 40%;
}
<div class="contAlign">
<div class="container">
<img class="picture" src="https://kbob.github.io/images/sample-3.jpg">
<div class="desc"></div>
</div>
<div class="container">
<img class="picture" src="https://imagej.nih.gov/ij/images/baboon.jpg">
<div class="desc"></div>
</div>
<div class="container">
<img class="picture" src="https://www.visioncritical.com/wp-content/uploads/2014/12/BLG_Andrew-G.-River-Sample_09.13.12.png">
<div class="desc"></div>
</div>
</div>

Answer 2

I hope this helps you out. once you make an element absolute, just make sure to make its parent relative. so that it doesn't float anywhere. Now you can set positions accordingly where you want to make it appear on hover.
.container {
height: 100px;
width:100px;
display: inline-block;
position: relative;
}
.picture {
height: 100%;
width:100%
}
.contAlign {
text-align: center;
}
.desc {
position:absolute;
bottom: 0;
left: 0;
right: 0;
background-color: black;
width: 100%;
height: 0%;
opacity: 0.5;
transition: .5s ease;
}
.container:hover .desc {
height: 40%;
}
<div class="contAlign">
<div class="container">
<img class="picture" src="https://kbob.github.io/images/sample-3.jpg">
<div class="desc"></div>
</div>
<div class="container">
<img class="picture" src="https://imagej.nih.gov/ij/images/baboon.jpg">
<div class="desc"></div>
</div>
<div class="container">
<img class="picture" src="https://www.visioncritical.com/wp-content/uploads/2014/12/BLG_Andrew-G.-River-Sample_09.13.12.png">
<div class="desc"></div>
</div>
</div>