Scale in Direction based on Location in Container

Question

I want to scale the size of a div when it's hovered over to give a more detailed view of it's content.

I had two ideas on how to do it, firstly have an onHover that when hovered shows an absolute positioned div that is perhaps 125%-130% bigger than the relative div and place it on top. (I kind of like this idea as it allows me to make the new div have different content to the one underneath)

The other idea would simply be to scale the original div using transform. I don't really want to do this though as the div thats "popping over" is a more detailed version of the underlying content.

I can do that no problem, however the part I'm getting stuck with (and can't seem to find an answer for), is to scale the div in a certain direction based on where it is located in a container row.

I created an image describing it below.

The default behaviour would be something like:

as you can see, the default behaviour is that when we scale we are aligned to the left and the extra width will go outwards to the right and the extra height will go downwards

The issue with this is, on the far right, the div that scaled has done so, but because of its position/direction, it's now gone off and to the right (outside the container).

Likewise, I'd like for the 2 centre divs to scale from the centre rather than from left to right.

Just to note, not all divs will be expanded at once, but I highlighted it that way just for the purpose of this question.

The desired result that I would like (showing all expanded), would be something like:

obviously this is kind of hard to see with them all expanded, but if I show a centre div being expanded only:

and then the right most

So what is the difference?

Firstly, each div is vertically centred based on it's relative container (that's easy to do), but the part that I'm stuck with is how to tell the centre divs to expand from the centre both vertically and horizontally, but then tell the leftmost and rightmost divs, expand from centre vertically but horizontally go left to right or right to left etc.

In the last image above, the div knows that it is on the far right of the container and shouldn't expand the default way because it would overflow out of the container, so instead it expands inwards.

Is this possible with CSS only? Or is it a combination of CSS and JS.

I hope that makes sense!

userurKQ · Answer

Is this the sort of thing you're looking for? The bigbox div is a child of the small box and I've absolutely positioned it then used a bunch of utility classes to position the child div. Should be fairly self-explanatory but drop me a comment and I'll elaborate further.

* {
  box-sizing: border-box;
}

.smallbox {
  --offset: 0.5rem;
  position: relative;
  display: inline-block;
  aspect-ratio: 2/1;
  background-color: #dae8fc;
  border: 1px solid #6c8ebf;
  padding: 0.5rem;
  margin: 1rem;
}

.bigbox {
  font-size: 1.25rem;
  position: absolute;
  padding: 0.5rem;
  background-color: #d5e8d4;
  border: 1px solid #82b366;
  width: 150%;
  aspect-ratio: 2/1;
  opacity: 0;
  z-index: 1;
}

.smallbox:hover .bigbox {
  opacity: 1;
}

.left {
  left: calc(-1 * var(--offset));
}

.right {
  right: calc(-1 * var(--offset));
}

.top {
  top: calc(-1 * var(--offset));
}

.center {
  left: 50%;
  translate: -50%;
}

.middle {
  top: 50%;
  translate: 0 -50%;
}

.bottom {
  bottom: calc(-1 * var(--offset));
}

.center.middle {
  top: 50%;
  left: 50%;
  translate: -50% -50%;
}


  Some content
  
    Some content (but bigger!)
  



  Some content
  
    Some content (but bigger!)
  



  Some content
  
    Some content (but bigger!)
  







  Some content
  
    Some content (but bigger!)
  



  Some content
  
    Some content (but bigger!)
  



  Some content
  
    Some content (but bigger!)
  


 


  Some content
  
    Some content (but bigger!)
  


  Some content
  
    Some content (but bigger!)
  


  Some content
  
    Some content (but bigger!)

Scale in Direction based on Location in Container

1 Answers