Html - I am trying to zoom divs in a grid layout such that none of them overflow out of the view

ishandutta2007
December 10, 2023
255 views
0 votes
2 Answers

For example in the following I have implemented in row wise flex-direction of the container, as you can see the content of even the rightmost div don’t overflow out of the page to right.
Similarly we can do for column-wise as well if we set flex direction of container to column. But I need both together where container is a grid layout with arbitrary number of rows and columns where the content of any grid neither overflows to right nor bottom of the grid.

.container{
  display: flex;
  flex-direction: row;
  justify-content: center;
}

.box{
  width: 200px;
  height: 250px;
  background: orange;
  margin: 0px 10px;
  overflow: hidden;
  transition: all 1500ms ease-in;
  //transition-property: height, width, background, box-shadow;
}

.box:hover{
  width: 120%;
  height: 120%;
  background: #ff800a;
  z-index: 2;
  box-shadow: 2px 2px 2px #000;
}

<div class="container">
  <div class="box">Ishan, it seems like you're interested in information related to "anyshare." Unfortunately, I don't have real-time internet access to provide the latest updates. However, if you have specific questions or topics related to "anyshare" that you'd like insights on, feel free to let me know, and I'll do my best to assist you.Ishan, it seems like you're interested in information related to "anyshare."  it seems like you're interested in information related to "anyshare." Unfortunately, I don't have real-time internet access to provide the latest updates. However, if you have specific questions or topics related to "anyshare" that you'd like insights on, feel free to let me know, and I'll do my best to assist you.Ishan, it seems like you're interested in information related to "anyshare." Unfortunately, I don't have real-time internet access to provide the latest updates. However, if you have specific questions or topics related to if you have specific questions or Ishan, it seems like you're interested in information related to "anyshare." Unfortunately, I don't have real-time internet access to provide the latest updates. However, if you have specific questions or topics related to if you have specific questions or Ishan, it seems like you're interested in information related to "anyshare."  it seems like you're interested in information related to "anyshare." Unfortunately, I don't have real-time internet access to provide the latest updates. However, if you have specific questions or topics related to "anyshare" that you'd like insights on, feel free to let me know, and I'll do my best to assist you.Ishan, it seems like you're interested in information related to "anyshare." Unfortunately, I don't have real-time internet access to provide the latest updates. However, if you have specific questions or topics related to if you have specific questions or Ishan, it seems like you're interested in information related to "anyshare." Unfortunately, I don't have real-time internet access to provide Ishan, it seems like you're interested in information related to "anyshare." Unfortunately, I don't have real-time internet access to provide the latest updates. However, if you have specific questions or topics related to if you have specific questions or the latest updates. However, if you have specific questions or topics related to if you have specific questions or topics related to "anyshare" that you'd like insights on, feel free to let me know, and I'll do my best to assist you.</div>
  <div class="box"></div>
  <div class="box">t have real-time internet access to provide the latest updates. However, if you have specific questions or topics related to "anyshare" that you'd like insights on, feel free to let me know, and I'll do Ishan, it seems like you're interested in information related to "anyshare." Unfortunately, I don't have real-time internet access to provide the latest updates. However, if you have specific questions or topics related to if you have specific questions or my best to Ishan, it seems like you're interested in information related to "anyshare." Unfortunately, I don't have real-time internet access to provide the latest updates. However, if you have specific questions or topics related to "anyshare" that you'd like insights on, feel free to let me know, and I'll do my best to assist you.Ishan, it seems like you're interested in information related to "anyshare." Unfortunately, I don't have real-time internet access to provide the latest updates. However, if you have specific questions or topics related to if you have specific questions or Ishan, it seems like you're interested in information related to "anyshare." it seems like you're interested in information related to "anyshare."  it seems like you're interested in information related to "anyshare." Unfortunately, I don't have real-time internet access to provide the latest updates. However, if you have specific questions or topics related to "anyshare" that you'd like insights on, feel free to let me know, and I'll do my best to assist you.Ishan, it seems like you're interested in information related to "anyshare." Unfortunately, I don't have real-time internet access to provide the latest updates. However, if you have specific questions or topics related to if you have specific questions or Ishan, it seems like you're interested in information related to "anyshare." Unfortunately, I don't have real-time internet access to provide the latest updates. However, if you have specific questions or topics related to if you have specific questions or assist you.Ishan, it seems like you're interested in information related to "anyshare." Unfortunately, I don't have real-time internet access to provide the latest updates. However, if you have specific que</div>
</div>
<hr>
<div class="container">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box">Ishan, it seems like you're interested in information related to "anyshare." Unfortunately, I don't have real-time internet access to provide the latest updates. However, if you have specific questions or topics related to "anyshare" that you'd like insights on, feel free to  it seems like you're interested in information related to "anyshare." Unfortunately, I don't have real-time internet access to provide the latest updates. However, if you have specific questions or topics related to "anyshare" that you'd like insights on, feel free to let me know, and I'll do my best to assist you.Ishan, it seems like you're interested in information related to "anyshare." Unfortunately, I don't have real-time internet access to provide the latest updates. However, if you have specific questions or topics related to if you have specific questions or Ishan, it seems like you're interested in information related to "anyshare." it seems like you're interested in information related to "anyshare." Unfortunately, I don't have real-time internet access to provide the latest updates. However, if you have specific questions or topics related to "anyshare" that you'd like insights on, feel free to let me know, and I'll do my best to assist you.Ishan, it seems like you're interested in information related to "anyshare." Unfortunately, I don't have real-time internet access to provide the latest updates. However, if you have specific questions or topics related to if you have specific questions or Ishan, it seems like you're interested in information related to "anyshare." let me know, and I'll do my best to assist you.Ishan, it seems like you're interested in information related to "anyshare." Unfortunately, information related to "anyshare."Ishan, it seems like you're interested in information related to "anyshare." Unfortunately, information related to "anyshare." Unfortunately, Ishan, it seems like you're interested in information related to "anyshare." Unfortunately, I don't have real-time internet access to provide the latest updates. However, if you have specific questions or topics related to if you have specific questions or I don't have real-time internet access to provide the latest updates. However, if you have specific questions or topics related to "anyshare" that you'd like insights on, feel free to let me know, and I'll do my best to assist you.</div>
</div>

I have tried to stack two container divs to create two rows but as you can see, the second row is overflowing the bottom of the page. Ideally it should push 1st row up to remain within view.

To summarise, My requirement is the currently zoomed div should strictly remain within the view wherever in the grid it may be located.

PS: By grid-layout I mean css properties grid-auto-rows or grid-auto-columns.

Tags: css html

Answers

Chosen as BEST ANSWER

Found what I was looking for

.gallery {
  --n: 3; /* number of rows*/
  --m: 4; /* number of columns */
  --s: 150px; /* control the size */
  --g: 10px;  /* control the gap */
  --f: 1.5;   /* control the scale factor */
  
  display: grid;
  gap: var(--g);
  width:  calc(var(--m)*var(--s) + (var(--m) - 1)*var(--g));
  height: calc(var(--n)*var(--s) + (var(--n) - 1)*var(--g));
  grid-template-columns: repeat(var(--m),auto);
}


.gallery > .box {
  width: 0;
  height: 0;
  min-height: 100%;
  min-width: 100%;
  object-fit: cover;
  cursor: pointer;
  filter: grayscale(80%);
  transition: .35s linear;
  overflow: hidden;
}

.gallery .box:hover{
  filter: grayscale(0);
  width:  calc(var(--s)*var(--f));
  height: calc(var(--s)*var(--f));
}

body {
  margin: 0;
  min-height: 100vh;
  display: grid;
  place-content: center;
  background: #60c4ff;
}

<div class="gallery">
<div class="box">Ishan, it seems like you're interested in information related to "anyshare." Unfortunately, I don't have real-time internet access to provide the latest updates. However, if you have specific questions or topics related to "anyshare" that you'd like insights on, feel free to let me know, and I'll do my best to assist you.Ishan, it seems like you're interested in information related to "anyshare."  it seems like you're interested in information related to "anyshare." Unfortunately, I don't have real-time internet access to provide the latest updates. However, if you have specific questions or topics related to "anyshare" that you'd like insights on, feel free to let me know, and I'll do my best to assist you.Ishan, it seems like you're interested in information related to "anyshare." Unfortunately, I don't have real-time internet access to provide the latest updates. However, if you have specific questions or topics related to if you have specific questions or Ishan, it seems like you're interested in information related to "anyshare." Unfortunately, I don't have real-time internet access to provide the latest updates. However, if you have specific questions or topics related to if you have specific questions or Ishan, it seems like you're interested in information related to "anyshare."  it seems like you're interested in information related to "anyshare." Unfortunately, I don't have real-time internet access to provide the latest updates. However, if you have specific questions or topics related to "anyshare" that you'd like insights on, feel free to let me know, and I'll do my best to assist you.Ishan, it seems like you're interested in information related to "anyshare." Unfortunately, I don't have real-time internet access to provide the latest updates. However, if you have specific questions or topics related to if you have specific questions or Ishan, it seems like you're interested in information related to "anyshare." Unfortunately, I don't have real-time internet access to provide Ishan, it seems like you're interested in information related to "anyshare." Unfortunately, I don't have real-time internet access to provide the latest updates. However, if you have specific questions or topics related to if you have specific questions or the latest updates. However, if you have specific questions or topics related to if you have specific questions or topics related to "anyshare" that you'd like insights on, feel free to let me know, and I'll do my best to assist you.</div>
  <img class="box" src="https://picsum.photos/id/15/300/300" alt="a waterfall and many rocks">
  <img class="box" src="https://picsum.photos/id/1040/300/300" alt="a house on a mountain">
  <img class="box" src="https://picsum.photos/id/106/300/300" alt="sime pink flowers">
  <img class="box" src="https://picsum.photos/id/136/300/300" alt="big rocks with some trees">
  <img class="box" src="https://picsum.photos/id/1039/300/300" alt="a waterfall, a lot of tree and a great view from the sky">
  <img class="box" src="https://picsum.photos/id/110/300/300" alt="a cool landscape">
  <div class="box">t have real-time internet access to provide the latest updates. However, if you have specific questions or topics related to "anyshare" that you'd like insights on, feel free to let me know, and I'll do my best to assist you.Ishan, it seems like you're interested in information related to "anyshare." Unfortunately, I don't have real-time internet access to provide the latest updates. However, if you have specific que</div>
  <img class="box" src="https://picsum.photos/id/1057/300/300" alt="a great view of the sea above the mountain">
  <img class="box" src="https://picsum.photos/id/1016/300/300" alt="a great view of a canyon">
  <img class="box" src="https://picsum.photos/id/1015/300/300" alt="a great view of a river between mountains">
  <div class="box">Was a wild bear now wild text Ishan, it seems like you're interested in information.Ishan, it seems like you're interested in information.Ishan, it seems like you're interested in information.Ishan, it seems like you're interested in information.</div>
</div>

(Edit)

You can do this by translating the hovered box to the center of the screen and zoom it. This can be done using position: fixed; and transform: translate properties. I did it using an animation keyframe:

.container{
    display: flex;
    flex-direction: row;
    justify-content: center;
}

.box{
    width: 250px;
    height: 300px;
    background: orange;
    margin: 0px 10px;
    transition: 1s;
    overflow: hidden;
    transition: 0.1s ease;
}


.box:hover{
    animation-name: relocate-box;
    animation-duration: 1.5s;
    animation-iteration-count: 1;
    animation-timing-function: linear;
    animation-fill-mode: forwards;
}

@keyframes relocate-box {
    100% {
        width: 90vw;
        height: 90vh;
        background: #ff800a;
        z-index: 2;
        box-shadow: 2px 2px 2px #000;        
        position: fixed;
        margin: auto;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
}

<div class="container">
    <div class="box">1. Ishan, it seems like you're interested in information related to "anyshare." Unfortunately, I don't have real-time internet access to provide the latest updates. However, if you have specific questions or topics related to "anyshare" that you'd like insights on, feel free to let me know, and I'll do my best to assist you.Ishan, it seems like you're interested in information related to "anyshare." Unfortunately, I don't have real-time internet access to provide the latest updates. However, if you have specific questions or topics related to if you have specific questions or topics related to "anyshare" that you'd like insights on, feel free to let me know, and I'll do my best to assist you.</div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box">t have real-time internet access to provide the latest updates. However, if you have specific questions or topics related to "anyshare" that you'd like insights on, feel free to let me know, and I'll do my best to assist you.Ishan, it seems like you're interested in information related to "anyshare." Unfortunately, I don't have real-time internet access to provide the latest updates. However, if you have specific que</div>
</div>
<hr>
<div class="container">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box">2. Ishan, it seems like you're interested in information related to "anyshare." Unfortunately, I don't have real-time internet access to provide the latest updates. However, if you have specific questions or topics related to "anyshare" that you'd like insights on, feel free to let me know, and I'll do my best to assist you.Ishan, it seems like you're interested in information related to "anyshare." Unfortunately, information related to "anyshare."Ishan, it seems like you're interested in information related to "anyshare." Unfortunately, information related to "anyshare." Unfortunately, I don't have real-time internet access to provide the latest updates. However, if you have specific questions or topics related to "anyshare" that you'd like insights on, feel free to let me know, and I'll do my best to assist you.</div>
</div>

Note: Using css to move the box to the center like above, may remove the hover activation because the mouse stays stationary while the box moves away. This causes (unwanted) jitter/glitches.

To Fix this, I have used javascript to toggle between style classes:

const boxes = document.querySelectorAll(".box");            
let isCurrentlyAnimating = false;
let isAnyBoxActive = false;

boxes.forEach(box => {
    box.addEventListener(
        "mouseover",
        () => {
            if(!isAnyBoxActive) {
                isCurrentlyAnimating = true;
                isAnyBoxActive = true;

                event.target.classList.add("active");

                setTimeout(() => {
                    isCurrentlyAnimating = false;
                }, 1500);
            }
        }
    );

    box.addEventListener(
        "mouseleave",
        () => {
            if(!isCurrentlyAnimating) {
                event.target.classList.remove("active");

                setTimeout(() => {
                    isAnyBoxActive = false;
                }, 1500);
            }
        }
    );

});

.container{
    display: flex;
    flex-direction: row;
    justify-content: center;
}

.box{
    width: 250px;
    height: 300px;
    background: orange;
    margin: 0px 10px;
    overflow: hidden;
    transition: 1.5s ease;
}


.active{
    width: 90vw;
    height: 90vh;
    background: #ff800a;
    z-index: 2;
    box-shadow: 2px 2px 2px #000;        
    position: fixed;
    margin: auto;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

<div class="container">
    <div class="box">1. Ishan, it seems like you're interested in information related to "anyshare." Unfortunately, I don't have real-time internet access to provide the latest updates. However, if you have specific questions or topics related to "anyshare" that you'd like insights on, feel free to let me know, and I'll do my best to assist you.Ishan, it seems like you're interested in information related to "anyshare." Unfortunately, I don't have real-time internet access to provide the latest updates. However, if you have specific questions or topics related to if you have specific questions or topics related to "anyshare" that you'd like insights on, feel free to let me know, and I'll do my best to assist you.</div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box">t have real-time internet access to provide the latest updates. However, if you have specific questions or topics related to "anyshare" that you'd like insights on, feel free to let me know, and I'll do my best to assist you.Ishan, it seems like you're interested in information related to "anyshare." Unfortunately, I don't have real-time internet access to provide the latest updates. However, if you have specific que</div>
</div>
<hr>
<div class="container">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box">2. Ishan, it seems like you're interested in information related to "anyshare." Unfortunately, I don't have real-time internet access to provide the latest updates. However, if you have specific questions or topics related to "anyshare" that you'd like insights on, feel free to let me know, and I'll do my best to assist you.Ishan, it seems like you're interested in information related to "anyshare." Unfortunately, information related to "anyshare."Ishan, it seems like you're interested in information related to "anyshare." Unfortunately, information related to "anyshare." Unfortunately, I don't have real-time internet access to provide the latest updates. However, if you have specific questions or topics related to "anyshare" that you'd like insights on, feel free to let me know, and I'll do my best to assist you.</div>
</div>

The boolean isCurrentlyAnimating is to prevent the box from going back to its normal state while it is being slowly translated to the center and isAnyBoxActive (this prevents the glitch).

The boolean isAnyBoxActive, prevents other boxes from being made active while one is already active

Please signup or login to give your own answer.

Click here to cancel reply.

Html – I am trying to zoom divs in a grid layout such that none of them overflow out of the view

Answers