Duncan Duncan - 1 year ago 81
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

Answer Source

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;
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download