I'm using Bootstrap 4 to make a gallery in a modal for a friend's personal site. I have it set up so that the images expand on hover-- but they cut off at the edges of the modal (or div) when I set overflow to auto. The gallery is also the third in a set of tabs, but all of those work great.
I've tried changing which div has the overflow-auto class; and I've tried marking various different but no matter what I try, I can't figure out how to make it so that the gallery scrolls AND have my images not be cut off on hover. Here is the relevant code right now:
.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>
Please let me know if more information is needed! This is my first time posting here :)
You need to add enough padding to your gallery so that when you scale up an image, there's enough room for the scaled version without any overflow occurring.
.gallery {
padding: 3rem;
overflow: auto;
height: 300px;
border: 1px solid red;
}
.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(1.5);
}
<div class="tab-pane container fade overflow-auto" id="memart">
<div class="row ml-2">
<h1>Gallery</h1>
</div>
<div class="row">
<div class="gallery">
<img src="https://picsum.photos/id/217/300" class="gallery-img">
<img src="https://picsum.photos/id/218/300" class="gallery-img">
<img src="https://picsum.photos/id/219/300" class="gallery-img">
<img src="https://picsum.photos/id/220/300" class="gallery-img">
</div>
</div>
</div>