Duncan Duncan - 1 month ago 8
CSS Question

How can I scale a div with css transform but keep the contents unscaled?

I am trying to create the effect of expanding a div to reveal more of an image but at the moment, the image expands with the div scaling. I currently expand the div like so;

.panel:hover {
transform: scaleX(1.5);
z-index: 10;
}


I have tried appling the transformation to parent attributes such as the list and anchor tags with no luck. Here is my codepen

http://codepen.io/duncanmolesworth/pen/LRdKYj

Many thanks in advance

Answer

What you are doing is kind of zooming the panel, what you want to do is increase its width.

You can try this:

.panel:hover {
   width: 150%;
   left: -25%;
   z-index: 10;
}
Comments