How to make transform scale do not overflow?
Wrap every image into a container div and give overflow: hidden to it
<div class="image-container">
<img src="https://i.ibb.co/G9CYqz6/01.jpg">
</div>
<div class="image-container">
<img src="https://i.ibb.co/pbjtTMD/05.jpg">
</div>
<div class="image-container">
<img src="https://i.ibb.co/ckv3dPy/09.jpg">
</div>
<div class="image-container">
<img src="https://i.ibb.co/p0kYsQR/02.jpg">
</div>
...
and
.image-container {
overflow: hidden
}
How to manually set overflow size on parent container when using CSS transform on child?
Well you could use a pseudo element inside the container...
.parent:before {
content: '';
position: relative;
z-index: -1;
width: calc(4900px * 0.25);
height: calc(7000px * 0.25);
}
That should force the overflow. I'm using a negative z-index to make sure it doesn't interact with the content.
Note: if the scaling is dynamic it's likely easier to actually create an empty element (pseudo-classes are difficult to control via JS) and then dynamically control the height/width using Javascript.
<div class="parent">
<div class="spacer"></div>
<div class="child">
</div>
</div>
And CSS
.spacer {
content: '';
position: relative;
z-index: -1;
width: calc(4900px * 0.25);
height: calc(7000px * 0.25);
}
Edit: Oops just realized you need to go smaller than the original. The above would work if the new overflow is larger than the starting state...
In this specific case, you might want to avoid the transform all together and instead scale the background image. Then scale the element using your JS function. In this case, the background will scale to fit its container.
.child {
background-image: url("https://i.redd.it/7ifkx5z39b631.jpg");
background-size: contain;
width: calc(4900px * 0.25);
height: calc(7000px * 0.25)
}
Css transform scale based on container width
As you can read from MDN Web Docs and have also figured out yourself,
[In
calc()'s division] The right-hand side must be a <number>.
Unfortunately, this means that this function cannot be used with two px/% values.
calc() was probably our only alternative to JavaScript, and, in absence of that, we'll have to use just that.
You can read the full guide at CSS-Tricks, or you can see a working example provided by them here.
css only solution for scaling + overflow
Just set height:0 to .content:
.content { transform:scale(0.5); transform-origin: top left; height: 0;}
.container { position:absolute; top:40px; left:40px; bottom:40px; right:40px; overflow:scroll;}
/* css behind does not matter */span{ display:block; width:400px; height:400px; background-color:pink; border:1px solid green;}span:nth-child(2n){ height:300px; background-color:gold;}<html><body>
<div class="container"> <div class="content">
<span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> ...when zoomed there are empty space here under ... </div></div>
</body></html>Parent container not overflowing if child scald using css3 Transform:Scale
See instead of scaling your image, scale div in which image is present to see scroll on both axis i.e x and y. I have made few changes html structure just for understanding check this jsFiddle.
$(document).ready(function(){ $("#box > .ch").css({ 'transform' : 'scale(1.8)', 'transition' : '1s ease' });});#box{ overflow-x: auto; overflow-y: auto; display: flex; background:red; flex-direction: column;}#box > .ch{ flex:1; flex-shrink: 0; background: #fff; overflow: auto;}#box > .ch > img{ width:100%;}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><div id="box"> <div class="ch"> <img src = "https://s3-us-west-2.amazonaws.com/cbsapp/package_content/s78c_e4vt6/main_images/pg_4.jpg"> </div></div>Can't quite get image to scale, and use overflow:hidden to work
Full working code snipped below my steps
- remove unnecessary elements Removed purple square, because it's never seen in wanted animation.
- Removed the part the full #container div.bottom:hover part.
- Removed every style that begins with #shell in the css and later trigger the animation on #container:hover.
- main issue Add an #migraine-dentistry after the #container:hover animation, so if someone hovers the container it effects the #migraine-dentistry element. (#container:hover #mi.. {trans..})
- In this (#container:hov..) element remove everything and
insert transform: scale(1.2);
because we just want to scale if user is hovering. - Remove whole #container div {..} style element, because we will directly add these styles to the #migraine-dentistry element.
- In #container define px values for
> width: 355px; and height: 255px;
just because we not use the #shell element anymore. Also
> set position: relative; and z-index: 2;
that the #migrain.. element is inside his parent. And
> set border-radius: 15px;
for styling. Finally
>remove the display and transition values
because they are simply not needed. - last In #migraine-de.. styles
>set width: 100%; and height: 100%;
to fit div to parent.
> remove border-radius tag
because it's set by the #container
> add transition: 0.3s ease-in-out;
to transition like you wanted.#container {
border-radius: 15px;
width: 355px;
height: 255px;
overflow: hidden;
z-index: 2;
position: relative;
}
#container:hover #migraine-dentistry {
transform: scale(1.2);
}
#migraine-dentistry {
width: 100%;
height: 100%;
transition: 0.3s ease-in-out;
background-image: url('https://images.unsplash.com/flagged/photo-1563248101-a975e9a18cc6?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1950&q=80');
}<body>
<div id="shell">
<div id="container">
<div id='migraine-dentistry' class="bottom"></div>
</div>
</div>
</body>
Related Topics
CSS Takes Effect After Page Has Rendered
How to Make Image Responsive Inside a Div
Font Size. What How to Be Sure Of
Vertical Line with Dots in Ends and Between
Ionic Item with Left and Right Aligned Text
What to Use Instead of Contains() in CSS3
CSS3 Display:Table, Overflow-Y:Scroll Doesn't Work
How Specify Two CSS Classes: from Property and Conditional Class
Why Does Svg Get Blurred When Scaled Under Webkit Browsers
Scale Image Until Either X or Y Is The Same as The Container and Then Crop The Rest
How to Make Multiple Spans Equal Width Within a Div
How to Use Bootstrap 5 Custom Color Directly in The Class Attribute
Scale of Image with CSS3 Animation