Struggling to make this work for 48 hours with no success. Here's the challenge: there is a standard row with regular columns that have an additional product class:
<div class="row">
<div class="col-lg-4 product">
// Content
</div>
<div class="col-lg-4 product">
// Content
</div>
<div class="col-lg-4 product">
// Content
</div>
.....
</div>
And here is the CSS rule that adjusts the height on hover
.product:hover {
height: 500px;
}
My goal is to prevent other column divs from moving when hovering over one. I want it to look like this:
https://i.sstatic.net/IAEuX.png
However, what actually happens is (the columns below shift due to "height overload"):
https://i.sstatic.net/FBn0F.png
I've attempted various solutions:
- Setting the
productclass to haveabsoluteposition - Setting the
productclass to haverelativeposition - Trying to wrap inner content in another
product-wrapperdiv with different position types (absolute|relative)
Unfortunately, none of these methods worked.
Is it feasible to achieve this using Bootstrap's row columns? If so, how can it be done?