CSS: How to scale an image from the center instead of top-left
Add this to the div:hover
:
transform: translateX(-25%) translateY(-25%);
Here is the Fiddle: http://jsfiddle.net/3ya98xh8/4/
may as well throw my solution up in case it is helpful to anyone:
::CSS::
img {
width: 100%; max-width: 100%;
}
div {
position: absolute; left: 50%; top: 50%;
margin-left: -125px; margin-top: -100px;
width: 250px;
transition: all 2s ease-in-out;
}
div:hover {
margin-left: -200px; margin-top: -150px;
width: 400px;
}
::HTML::
<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>
::Fiddle:: http://jsfiddle.net/Eolis/3ya98xh8/5/
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>
Don't forget to set transform-origin
.current{
top: 0px;
left: 0px;
z-index: 2;
opacity: 1;
transform: scale(0.9, 0.9);
transition: opacity 1.6s ease-out 0s, transform 7.2s linear 0s;
transform-origin: center center;
animation: normal;
}
https://css-tricks.com/almanac/properties/t/transform-origin/