Recently, I utilized Bootstrap to create a grid where one of the columns contains a grid of divs. Each div is designed to expand on hover and overlap surrounding ones.
These divs are equipped with images and text. On mobile devices, there are 3 divs stacked vertically, while on larger screens, they form 3 rows of 3 inline divs. Achieving this layout involved applying specific classes like col d-flex flex-column flex-md-row to the containing bootstrap div.
<div class="container">
<div class="row">
<div class="col-lg-3">
<p>Content Placeholder</p>
</div>
<div class="col-lg-9 ">
<div class="row">
<div class="col d-flex flex-column flex-md-row justify-content-around">
<div class="image-container">
<div class="left">
<img src="./img/flag.png" alt="">
</div>
<div class="main">
<img src="some image" alt="">
<p>Some text</p>
</div>
<div class="lower">
<button class="btn">Link me</button>
</div>
</div>
/* two more .image-container divs */
</div>
</div>
/* repeated div.row and div.col.d-flex structures*/
</div>
</div>
</div>
An important detail is that every image-div includes hidden side divs, expanding the div on hover without shifting surrounding elements due to z-index placement. However, on mobile devices with flex-column direction, the expansion only occurs towards left, not bottom. The hidden bottom div appears inside the parent div during hover, rather than above or below lower positioned items.
Here's an excerpt of the SCSS code:
.col-lg-3 {
display: none;
@media only screen and (min-width: 992px) {
display: flex;
}
}
.image-container {
margin:15px;
width: 250px;
position: relative;
.main {
padding: 0 10px;
border: 1px solid black;
}
.lower {
display: none;
position: absolute;
background-color: white;
bottom: 0;
right: 0;
width: 100%;
height: 21%;
border: 1px solid black;
border-top: none;
padding: 0 10%;
button {
width: 100%;
background-color: orange;
color: white;
}
}
.left {
display: none;
position: absolute;
background-color: gray;
left: -50px;
top: 0;
height: 100%;
width: 50px;
border: 1px solid black;
border-right: none;
img {
width: 50%;
margin: auto;
}
}
&:hover {
z-index:1;
height: 115%;
.lower, .left {
display: block;
}
}
}
I would appreciate insight on why this behavior persists on mobile views and suggestions for alternative methods in achieving these expanding-on-hover divs.