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


Many thanks in advance


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;