html - 如何将鼠标悬停在图像上

Question

到目前为止我有这个

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

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

All help is appreciated. Thank you for your effort :D.

Answer 1

您可以在没有 javascript 的情况下使用 background-image 作为第二张图片的预加载器来执行此操作。

限制:

1. img 必须是已知大小。
2. 在 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;
}