CSS Zoom to a div inside a div-CodePudding

Let's say I have a div inside a div

So what I want to do here is to zoom red (with overflow: hidden) to the blue div, so the blue div would get bigger inside red without it actually resized

How to achieve this with css?

CodePudding user response：

Zoom is an event. This is what Javascript is for. Yes you can style the page do to what you want but you're going to have to respond to whatever event that is supposed to trigger the zoom, such as clicking in a particular area, page scroll to a particular point, a timer, etc.

To make a div element cover the entire viewport, make sure your html and body elements have zero padding and zero margin. Then you set CSS properties of the div, namely, height and width, to be 100%.

CodePudding user response：

strong text

.one {
  width: 400px;
  height: 400px;
  border: 1px solid red;
  display: flex;
  justify-content: center;
  align-items: center;
}

.two {
  width: 100px;
  height: 100px;
  border: 1px solid blue;
  zoom: 3.8;
}

<div >
  <div >
    
  </div>
</div>