所以我的问题是我有一个图像,我设置它的CSS有一个
max-width: 100%
它以较低的分辨率进行缩放(如下面的小提琴所示).我想要的是过渡从图像中心生效.
目前;从我从大多数情况看到的我所做的涉及比例的过渡,他们从左上角扩展.
解决方法
只需更换宽度:400px;
transform: scale(2,2)
on:悬停.
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>