悬停/缩放变换背景图像

我已经使用下面的代码来创建一行图像保持器，它可以是纵向或横向。我无法解决如何将悬停比例转换应用于每张图片（较大）。下面是代码：悬停/缩放变换背景图像

<ul> 
    <li> 
     <div style="width:150px; height:150px; 
      background: url('img/2.png') no-repeat center; 
      border:1px solid red;"> 
     </div> 
    </li> 


    <li> 
     <div style="width:150px; height:150px; 
      background: url('img/1.png') no-repeat center; 
      border:1px solid red;"> 
     </div> 
    </li> 

    <li> 
     <div style="width:150px; height:150px; 
      background: url('img/3.png') no-repeat center; 
      border:1px solid red;"> 
     </div> 
    </li> 
</ul>

来源

2012-11-08 user1766493

li div:hover{ 
    transform:scale(1.1,1.1); 
}

来源

2012-11-08 16:52:26

对不起，我现在有分辨率的问题 - 背景图片大小不能让我怎么扩展到更大的版本改变了吗？ – user1766493

你能解释一下自己好一点吗？ –

感谢您回来 - 这种方式使用固定大小的图像 - 我所有的图像都不能大于150像素，所以如果我应用比例变换，那么我会得到像素化的缩略图。我想将鼠标悬停在图像上，并将缩略图转换为更高分辨率的图像。我试图隐藏高分辨率图像，但它不是一个平滑的过渡。看起来，背景图像的想法可能适用于肖像/风景，但不适用于缩放。对不起，如果我不清楚。 – user1766493

悬停/缩放变换背景图像

回答

相关问题