鼠标hover图片改变

实例：http://www.d3box.com/sample/hover-change.html

1. 看到很多站点，鼠标移动到产品图片上面图片就会切换的效果。通过查看相关的css代码，发现其实很简单。主要涉及到以下几个方面：

默认浏览器：chrome 

定位：position 对图片定位

透明度：opacity 设置图片透明度

动画：transition （可有可无）

2.html代码：两个div，4张图片，top image为hover改变图片。

3.css代码：

* {
	padding: 0;
	margin: 0;
}
div {
	position: relative;
	float: left;
	border: 1px solid gray;
	margin: 50px;
}
div img {
	width: 200px;
	height: 200px;
}
div img:last-child {
	position: absolute;
	top: 0;
	left: 0;
	opacity: 0;
	z-index: 1;
	transition: all 0.5s ease-in;
}
div:hover img:last-child {
	opacity: 1;
}