Skip to main content
U
Under S.
Inspiring
March 19, 2019
Answered

Any way to tell css where object center is when using transform:scale?

  • March 19, 2019
  • 2 replies
  • 910 views

The following code will enlarge an object by a scale of 2 on mouseover.

a:hover {

transform: scale(2);

}

By default, it expands from the middle outward.

Is there a way to tell this thing to scale in a specific direction (in other words, so that at least one of the sides remains fixed) while maintaining its proportions?

This topic has been closed for replies.
Correct answer Jon Fritz

Without seeing your full page, it's difficult to say where you may be going wrong with transform-origin.

As for scaling a background-image, you can use the background-size setting on :hover and set it to 200%. Using that, in combination with percentage based background-position values, you can get the background to "grow" from pretty much anywhere relative to its container.

2 replies

Nancy OShea
Nancy OShea
Community Expert
March 19, 2019

If memory serves, I think you have to put your element inside a relatively positioned parent container.

Nancy O'Shea— Product User, Community Expert & Moderator
Jon Fritz
Jon Fritz
Community Expert
March 19, 2019

I'm pretty sure you're looking for the transform-origin property.

CSS transform-origin property

U
Under S.Author
Inspiring
March 19, 2019

https://forums.adobe.com/people/Jon+Fritz+II  wrote

I'm pretty sure you're looking for the transform-origin property.

CSS transform-origin property

I must not be using it right, because adding the following to my class (either the regular state or the :hover state) didn't change anything.

transform-origin: left,center;

I also tried "0%,50%" and "0,50%" with the same non-results. It still expands from the middle outward in all directions. The outer container is relatively-positioned, as recommended. I'd like either the left or right side to remain fixed when the other sides expand.

Tested on latest FF + IE (I don't test on Chrome anymore, too much of a hassle to flush the cache all the time).

ALTERNATIVELY...

...if I could apply the transform:scale property to only the BACKGROUND IMAGE of the <a> tag (rather than all the <a> tag) then problem solved even more elegantly, because it'll remain contained and not burst out of its seams. Is that possible? If not, I need to be able to move the center point either left or right so I can nail one of the sides down.

Nancy OShea
Nancy OShea
Community Expert
March 19, 2019

I don't think anybody here really understands what you're trying to do.  So I'm going to bow out of this discussion until you can post a URL to your test page.    Also hover doesn't work on touch screens.   But I think you already know that.

Nancy O'Shea— Product User, Community Expert & Moderator
Terms & ConditionsAccessibility statement
Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices