For my friend's personal site, I am using Bootstrap 4 to create a gallery within a modal. I have managed to make the images expand on hover, but I am facing an issue where the images get cut off at the edges of the modal when I set the overflow to auto. The gallery is part of a set of tabs, and the first two tabs are working perfectly.
I have attempted changing the placement of the overflow-auto class within different divs, and have tried experimenting with various options, but I can't seem to find a solution that allows the gallery to scroll without cutting off the images on hover. Below is the code snippet that I am currently using:
.gallery {
overflow:visible !important;
z-index:999;
}
.gallery-img {
background-color:#ffeaf2;
height:10rem;
margin-left:0.5rem;
margin-top:0.5rem;
padding:0.3rem;
transition: transform .5s;
width:auto;
}
.gallery-img:hover {
box-shadow: 0 0 3px 3px #ffeaf2;
transform: scale(2);
z-index:999;
}
<div class="tab-pane container fade overflow-auto" id="memart" style="margin-top:-24rem; height:23rem">
<div class="row ml-2">
<h1>Gallery</h1>
</div>
<div class="row">
<div class="gallery">
<img src="https://f2.toyhou.se/file/f2-toyhou-se/images/56329856_TuDnR2FzlveInTq.png" class="gallery-img">
<img src="https://f2.toyhou.se/file/f2-toyhou-se/images/56329876_O85sZH316z1NQQz.png" class="gallery-img">
<img src="https://f2.toyhou.se/file/f2-toyhou-se/images/56330075_hjGCrMrZI3dFtcT.png" class="gallery-img">
<img src="https://f2.toyhou.se/file/f2-toyhou-se/images/62146009_V0BKO0RXTJLZdTT.png" class="gallery-img">
</div>
</div>
</div>
If you need more information, please feel free to ask! This is my first time seeking help on this platform :)