CSS: How to scale an image from the center instead of top-left

css scale center transition
Eolis picture Eolis · Feb 25, 2015 · Viewed 68.8k times · Source

So my problem is that I have an image and I set its CSS to have a 

max-width: 100%

which scales it at lower resolutions ( as will be seen in the fiddle below ). What I want is for the transition to take effect from the center of the image.

Currently; and from what I have seen from most the transitions I have done involving scale they expand from the top-left corner.

here is my fiddle: http://jsfiddle.net/Eolis/3ya98xh8/3/

Answer

Gildas.Tambo picture Gildas.Tambo · Feb 25, 2015

Just replace width: 400px; with transform: scale(2,2) on :hover.

img {
    width: 100%; max-width: 100%;
}
div {
    position: absolute; left: 20%; top: 20%;
    width: 250px;
    transition: all 2s ease-in-out;
}
div:hover {
    transform: scale(2,2)
}
<div>
    <a href="http://photobucket.com/images/cat" target="_blank">
        <img src="http://i583.photobucket.com/albums/ss278/campipr/coolcat.gif" border="0" alt="cat photo: cat coolcat.gif"/>
    </a>
</div>

Related questions

Scale the contents of a div by a percentage?

Building a CMS of sorts where the user can move around boxes to build a page layout (basic idea anyway). I'd like to pull the actual contents in from the database and build out the "page", but have it display …

Read More
CSS image scaling to fit within area not distort

Is there a way with CSS or otherwise of making an image fit within an area. Lets say I have multiple images of different sizes and I want them all to fit within a div of 150px by 100px. I …

Read More
WebKit: Blurry text with css scale + translate3d

I'm seeing an issue where Chrome and other WebKit browsers massively blur any css-scaled content that also has translate3d applied. Here's a JS Fiddle: http://jsfiddle.net/5f6Wg/. (View in Chrome.) Are there any known workarounds for this? …

Read More