CODEWITHSUNDEEP
htmlcsshovercss-transitionscss-transforms
Duncan
Duncan

Reputation: 447

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

Upvotes: 1

Views: 1166

Answers (1)

user3115197
user3115197

Reputation: 121

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;
}

Upvotes: 1

Related Questions