How to fit an image to a div with table-cell display - html

Question

I have the following HTML and CSS. As you can see I have my main div divided into two parts of 70 and 30%. Also, the inner divs have a display property set to table cell. On the right inner div, I have image slides which don't fit the div 100% both vertically and horizontally. I would also want to display the top-layer text on hovering on the images. How do I fit the images to the available space? How do I display the text exactly at the center of the images on image hover?
HTML:
<div id="investment">
<div id="left ">
</div>
<div id="right">
<img class="slides" src="..../img01.jpeg">
<img class="slides" src="..../img02.jpeg">
<img class="slides" src="..../img03.jpeg">
<p id="top-layer">text here</p>
</div>
</div>
CSS :
#left {
width: 70%;
display: table-cell;
vertical-align: middle;
}
#right {
position: relative;
width: 30%;
display: table-cell;
vertical-align: middle;
}
#right #top-layer{
position: absolute;
top: 0;
left: 0;
display: table-cell;
vertical-align: middle;
}

Answer 1

I think you are looking for following solution.
May be it will halp you!
You are using table-cell but table-cell property doen't work untill it's parent don't have table property.
Horizontally align -
#investment {
display: table;
width: 100%;
}
#left {
width: 70%;
display: table-cell;
vertical-align: middle;
}
.slide {
display: table;
}
#right {
position: relative;
width: 30%;
display: table-cell;
vertical-align: middle;
}
#right img {
max-width: 100%;
}
.imageBlock {
position: relative;
display: table-cell;
}
.imageBlock p {
position: absolute;
opacity: 0;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
margin:0;
}
.imageBlock:hover p {
opacity: 1;
}
#right #top-layer {
position: absolute;
opacity: 0;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
display: table-cell;
vertical-align: middle;
}
#right:hover #top-layer {
position: absolute;
opacity: 1;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
display: table-cell;
vertical-align: middle;
}
<div id="investment">
<div id="left ">
THIS IS BLANK SPACE AND WIDTH = 70%
</div>
<div id="right">
<div class="slide">
<div class="imageBlock">
<img class="slides" src="https://dummyimage.com/300x200/ff00ee/ff00ee">
<p>HOVER TEXT</p>
</div>
<div class="imageBlock">
<img class="slides" src="https://dummyimage.com/300x200/ffeerr/ffeerr">
<p>HOVER TEXT</p>
</div>
<div class="imageBlock">
<img class="slides" src="https://dummyimage.com/300x200/dddddd/dddddd">
<p>HOVER TEXT</p>
</div>
</div>
</div>
</div>
Vertically align -
#investment {
display:table;
width:100%;
}
#left {
width: 70%;
display: table-cell;
vertical-align: middle;
}
#right {
position: relative;
width: 30%;
display: table-cell;
vertical-align: middle;
}
#right img {
min-width:100%;
}
.imageBlock {
position:relative;
}
.imageBlock p {
position:absolute;
opacity:0;
top:50%;
left:50%;
transform:translate(-50%,-50%);
margin:0;
}
.imageBlock:hover p {
opacity:1;
}
#right #top-layer {
position: absolute;
opacity:0;
top: 50%;
left: 50%;
transform:translate(-50%,-50%);
display: table-cell;
vertical-align: middle;
}
#right:hover #top-layer{
position: absolute;
opacity:1;
top: 50%;
left: 50%;
transform:translate(-50%,-50%);
display: table-cell;
vertical-align: middle;
}
<div id="investment">
<div id="left ">
THIS IS BLANK SPACE AND WIDTH = 70%
</div>
<div id="right">
<div class="imageBlock">
<img class="slides" src="https://dummyimage.com/300x200/ff00ee/ff00ee">
<p>HOVER TEXT</p>
</div>
<div class="imageBlock">
<img class="slides" src="https://dummyimage.com/300x200/ffeerr/ffeerr">
<p>HOVER TEXT</p>
</div>
<div class="imageBlock">
<img class="slides" src="https://dummyimage.com/300x200/dddddd/dddddd">
<p>HOVER TEXT</p>
</div>
</div>
</div>