CODEWITHSUNDEEP
jqueryhtmlcssjquery-ui
cdub
cdub

Reputation: 25701

CSS Scaling a div but want html to remain at normal scale

I have an HTML and CSS as follows:

<div class="box" style="transform: scale(2);">
    <div class="text">This is my text.</div>
</div>

How do I keep the text from scaling when the outer box does via animation?

Upvotes: 3

Views: 3031

Answers (5)

PetarS
PetarS

Reputation: 1313

On theory you can't. The scale will work on the entire element and inner child tree. But you can make it look like it's scaling up. Something like that (this method is lighter on the GPU and browser drawing):

<div class="box" style="position: relative">
   <div class="box-block" style="position: absolute; transform: scale(2);"></div>
   <div class="text">This is my text.</div>
</div>

So the idea is:

  1. You have a container element
  2. You have two inner holding blocks
  3. You animate the one, that looks like the box and scale it.
  4. Text div will never be touched by the animation, because it's in a separate element.

The structure could be improved, hope that gives you an idea. Cheers!

Upvotes: 4

Roberto Lonardi
Roberto Lonardi

Reputation: 569

All the content of the transformed element is transformed with it, just like when using opacity, you need to set the text outside the scaling container, and using some positioning on them to make the overlay one another:

<div class="text">This is my text.</div>
<div class="box" style="transform: scale(2);"></div>

Alternatively, you can try to avoid the transform by setting an opposite style to the contained element:

<div class="box" style="transform: scale(2);">
     <div class="text" style="transform: scale(0.5);">This is my text.</div>
</div>

Upvotes: 2

The Witness
The Witness

Reputation: 920

I’m not sure if this is what you want but…

.parent {
    transform: scale(2);
}
.child {
    transform: scale(0.5);
}

Will scale child down. For scale x you have to use scale 1/x for all children.

Upvotes: 2

roberrrt-s
roberrrt-s

Reputation: 8210

transform: scale(x) scales the entire element with all of it's childs. I cannot see your CSS, but you should implement a hard-coded solution to make sure all your text isn't being scaled, in this case, it would be:

.box:hover {
    transform: scale(2);
}

.box:hover > .text {
    transform: scale(0.5); // change it back to half of the intended size by the .box;
}

Upvotes: 1

Pete
Pete

Reputation: 58422

you need to scale the inner div by 1 divided by original scale (in your case 1 divided by 2 is 0.5):

<div class="box" style="transform: scale(2);">
    <div class="text" style="transform: scale(0.5);">This is my text.</div>
</div>

Upvotes: 3

Related Questions