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

[Under S.]

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?

[Jon Fritz]

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

CSS transform-origin property

[Under S.]

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]

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.

[Jon Fritz · Accepted solution]

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.

[Nancy OShea]

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