I am struggling with making the height of an image overlay responsive while maintaining the aspect ratio. I have tried defining it in pixels, but it doesn't work as intended. Here is the snippet of my HTML code:
<ul class="img-list">
<li>
<a href="http://nataliemac.com"><br>
<img class="imgrd" src="http://127.0.0.1:8080/wordpress/wp-content/uploads/2016/03/PIC_6436-300x199.jpg" width="900" height="597" class="alignnone size-medium wp-image-189"><br>
<span class="text-content"><span>Place Name</span></span><br>
</a>
</li>
<p>
...
</p>
Here is a snippet of my CSS:
ul.img-list {
list-style-type: none;
margin: 0;
padding: 0;
text-align: center;
}
ul.img-list li {
display: inline-block;
margin: 0 1em 1em 0;
position: relative;
width: 100%;
height: 100%;
}
span.text-content span {
display: inline-block;
text-align: center;
vertical-align: middle;
}
ul.img-list li:hover span.text-content {
opacity: 1;
}
span.text-content {
display: inline-block;
background: rgba(0,0,0,0.5);
color: white;
cursor: pointer;
display: table;
left: 0;
position: absolute;
top: 25px;
width: 100%;
height: 100%;
border: 5px solid #fff;
border-radius: 10px 125px;
opacity: 0;
-webkit-transition: opacity 500ms;
-moz-transition: opacity 500ms;
-o-transition: opacity 500ms;
transition: opacity 500ms;
}
img.imgrd {
border-radius: 10px 125px;
}
Any help on making the height responsive would be greatly appreciated!