Question

到目前为止我有这个

<img src="1.png" onmouseover="this.src='hover1.png'" 
onmouseout="this.src='1.png'" class="HomePortfolioLeft image1" />

原始图像会在悬停时变成另一张图像，我已经实现了这一点。但问题是它只是在悬停时捕捉到另一个图像，这真的很不愉快。为了吸引我的设计师一方并保持客户满意，我想在图像之间进行过渡。（当盘旋，过渡然后下一张图像）我怎样才能做到这一点。

感谢所有帮助。谢谢你的努力：D。

Answer 1

你可以在没有javascript的情况下使用background-image作为第二张图片的预加载器。

极限：

img必须是已知的尺寸。
与2个元素之间的效果不同。

它是如何运作的。

使用盒子模型，您可以将0宽度和高度切换值设置为填充，以保持在相同外部大小的每个转换步骤。

这里有一些例子：http://codepen.io/gc-nomade/pen/Joqzp/

将图像缩小到中间将是：

img {
 /* known size */
    height:80px;
    width:150px;
 /* size to switch to padding */
    padding:0;
 /* preloaded image to switch to ,visually */
    background-image:url(image2.jpg);    
    /* transition timing */
    transition:0.5s;
}
img:hover {
 /* size */
    height:0px;
    width:0px;
 /* padding to resize the box and show background-image*/
    padding:40px 75px;
 /* timing*/
    transition:0.5s;
}

Answer 2

这会对你有帮助.. How to Hover over image

如何将过渡悬停在图像上

2 个答案: