I'm trying to figure out how to display an image that starts inside a grid but scales to the left or right of the screen. The current issue is that the container limits the width, and I need it to allow the image to extend beyond the grid.
If you have any ideas or suggestions on how to achieve this, please let me know! Here is a screenshot for reference: https://i.sstatic.net/e1JTa.png
I attempted to use a solution from this Stack Overflow thread: Extend bootstrap row outside the container
Here's the code I tried:
#main {
background: lightgreen;
height: 100vh;
}
#main > .row {
height: 100vh;
}
.left {
background: red;
position: relative;
top: 50%;
transform: translateY(-50%);
}
.left:before {
left: -999em;
background: red;
content: '';
display: block;
position: absolute;
width: 999em;
top: 0;
bottom: 0;
}
<div class="container" id="main">
<div class="row">
<div class="col-lg-6 left">
..
</div>
</div>
</div>
Unfortunately, this solution doesn't seem to work with images. If you have any insights or alternative methods to achieve the desired outcome, please share! Thank you.