Highlighted

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

Contributor ,
Mar 19, 2019

Copy link to clipboard

Copied

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?

Adobe Community Professional
Correct answer by Jon Fritz II | Adobe Community Professional

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.

Views

273

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

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

Contributor ,
Mar 19, 2019

Copy link to clipboard

Copied

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?

Adobe Community Professional
Correct answer by Jon Fritz II | Adobe Community Professional

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.

Views

274

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Mar 19, 2019 0
Adobe Community Professional ,
Mar 19, 2019

Copy link to clipboard

Copied

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

CSS transform-origin property

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Mar 19, 2019 0
Contributor ,
Mar 19, 2019

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Mar 19, 2019 0
Adobe Community Professional ,
Mar 19, 2019

Copy link to clipboard

Copied

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, ACP
Alt-Web.com

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Mar 19, 2019 0
Adobe Community Professional ,
Mar 20, 2019

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Mar 20, 2019 0
Adobe Community Professional ,
Mar 19, 2019

Copy link to clipboard

Copied

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

Nancy O'Shea, ACP
Alt-Web.com

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Mar 19, 2019 0