Scale parent element but remove scaling on child elements

css, html

Solution

`.scale:hover .dont-scale {}` run after `.scale:hover {}`,so scale(1) Measure than scale(2) ,for this reason child will be scaled same parent.

Try This :

.scale:hover .dont-scale{
    -webkit-transform : scale(0.5);
    transform : scale(0.5);
}

To avoid margins issue:

.dont-scale{
   -webkit-transform-origin : top left;
   -webkit-transition: transform 0.3s linear;
}

.scale {
  max-width : 200px;
  height : 200px;
  background-color : beige;
  -webkit-transition: transform 0.3s linear;
  -webkit-transform-origin : top left;
  transition: transform 0.3s linear;
  transform-origin : top left;
}

.dont-scale{
  -webkit-transform-origin : top left;
  -webkit-transition: transform 0.3s linear;
  transform-origin : top left;
  transition: transform 0.3s linear;
}

.scale:hover {
  -webkit-transform : scale(2.0);
  -webkit-transition: transform 0.3s linear;
  transform : scale(2.0);
  transition: transform 0.3s linear;
 }
 
.scale:hover .dont-scale{
  -webkit-transform : scale(0.5);
  transform : scale(0.5);
}    

<div class="scale">
  <div class="dont-scale">
    <ul>
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
      </ul>    
  </div>
</div>

Problem

I'm currently working on some css animation using `scale`. Is there a way to restrict child elements not to scale and only the parent element will scale. ``` .scale { max-width : 200px; height : 200px; background-color : beige; -webkit-transition: transform 0.3s linear; -webkit-transform-origin : top left; } .scale:hover { -webkit-transform : scale(2.0); -webkit-transition: transform 0.3s linear; } .scale:hover .dont-scale { -webkit-transform : scale(1.0); } ``` ``` <div class="scale"> <div class="dont-scale"> <ul> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> </ul> </div> </div> ```

Original source

Related problems