I have managed to successfully create the necessary code to incorporate an image with a child element containing text overlaying the image. However, this functionality does not appear to be working on Internet Explorer (IE), and I am struggling to find a CSS workaround.
HTML
<div class="row background-lightgrey p-0 m-0 pt-4">
<div class="col-md-6 m-0 p-0">
<h2 class="m-4 color-orange font-weight-light">Canvas Ultipro</h2>
<div class="ican-ultiproImage m-4">
<img class="w-100" src="assets/images/ultipro.png" height="500" />
</div>
<div class="ican-ultiproImageText p-2 pl-5 m-4">
<div class="row p-0 m-0">
<div class="col ican-ultipProImageOverlay">
<h2 class="ican-ultipProImageTitle">
Canvas UltiPro
</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
</div>
</div>
</div>
</div>
<div class="col-md-6 m-0 p-0">
<h2 class="m-4 color-orange font-weight-light">Canvas Accord</h2>
<div class="ican-ultiproImage m-4">
<img class="w-100" src="assets/images/ultipro.png" height="500" />
</div>
<div class="ican-ultiproImageText p-2 pl-5 m-4">
<div class="row p-0 m-0">
<div class="col ican-ultipProImageOverlay">
<h2 class="ican-ultipProImageTitle">
Canvas UltiPro
</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
</div>
</div>
</div>
</div>
</div>
CSS
.ican-ultiproImage {
height: 500px;
}
.ican-ultiproImageText {
display: block;
position: absolute;
bottom: 0px;
right: 0;
color: #fff;
background-color: rgba(107,107,107,0.6);
}
I am required to solely utilize CSS and am also incorporating bootstrap. I am having difficulties understanding why Internet Explorer is causing such a drastic shift in the layout. Setting the width of ican-ultiproImageText to auto or inherited does not seem to make a difference.
VIEW ON CHROME https://i.sstatic.net/eGZ9n.jpg
VIEW ON IE https://i.sstatic.net/Chfny.jpg