I have successfully achieved the result of displaying an image over another image using the following code:
<div class="row">
<div class="col-lg-6 col-md-6 col-sm-12">
<div class="image-with-overlay">
<div class="shop-now-overlay">
<img src="img/btn_shop_now.png">
</div>
<img src="img/left_image.jpg"/>
</div>
</div>
<div class="col-lg-6 col-md-6 col-sm-12">
<div class="image-with-overlay">
<div class="shop-now-overlay">
<img src="img/btn_shop_now.png">
</div>
<img src="img/right_image.jpg"/>
</div>
</div>
</div>
Here is how my stylesheet currently looks:
.image-with-overlay {
position: relative;
}
.image-with-overlay .shop-now-overlay {
position: absolute;
z-index: 10;
bottom: 0;
right: 0;
padding-bottom: 30px;
padding-right: 30px;
}
However, I would like to make my page responsive. Whenever I resize my browser to a smaller size and the images stack on a single column (col-sm-12), the overlay button extends beyond the image, taking up the full width of the page.
Do you have any suggestions on how I can ensure that the image overlay stays confined to the image even on smaller screens?