Skip to content
Advertisement

Make a DIV and all children elements smaller

I want to re-size a part of HTML in my design. I need this change to happen as an animation.

The DIV itself and all it’s inner elements i.e. Images, Paragraphs, Anchors etc should be re-sized just like when you re-size an image with a constant aspect ratio.

I think, the tool should get current height and width of element and increase/decrease them, but it won’t work for texts, actually for a text element you need to change font size.

How can I do this in JS, CSS, HTML?

Advertisement

Answer

You can use CSS transform:scale

.small {
  transform: scale(0.8, 0.8);
  -ms-transform: scale(0.8, 0.8); /* IE 9 */
  -webkit-transform: scale(0.8, 0.8); /* Safari and Chrome */
  -o-transform: scale(0.8, 0.8); /* Opera */
  -moz-transform: scale(0.8, 0.8); /* Firefox */
}

EDIT: reference/credits: Shrink/Grow animation using jQuery/CSS

Advertisement