七小时带你入门HTML+CSS网页设计，简单图片列表缩放特效(六)

大家好，这篇文章给大家分享怎么样设计一个简单的图片列表缩放特效页面

话不多说，直接看效果图：

html代码：

<div class="tpt-img">
	<img class="a" src="https://tpt360.com/tuimg/yan.png">
	<div class="b a">
		<div class="c"></div>
		<div class="d">
			简单图片列表缩放特效
		</div>
	</div>
</div>

知识点：

css:hover选择器是在鼠标移动到对应标签上的特殊样式，它可以用于所有元素。

css3 transform属性应用于元素的2D或3D转换，如旋转、缩放、移动、倾斜等。

css3 transition属性是在一定的时间范围内平滑地过渡效果，参数为时间，单位为s（秒）或者ms（毫秒）。

注意，以上的css3特效属性都要考虑浏览器的兼容性，如：

div {
	transform: scale(1.2,1.2);
	-webkit-transform: scale(1.2,1.2); /* Safari 和 Chrome */
	-moz-transform: scale(1.2,1.2); /* Firefox */
	-ms-transform: scale(1.2,1.2) /* IE 9 */
	-o-transform: scale(1.2,1.2); /* Opera */
}

CSS代码：

.tpt-img {
	position: relative;
	overflow: hidden;
	margin: 10px;
	width: 350px;
	height: 250px
}
.tpt-img img {
	z-index: 0;
	float: left;
	height: 100%;
	width: 100%
}
.tpt-img:hover img {
	opacity: 0.8;
	transform: scale(1.2,1.2);
	-webkit-transform: scale(1.2,1.2);
	-moz-transform: scale(1.2,1.2);
	-ms-transform: scale(1.2,1.2);
	-o-transform: scale(1.2,1.2)
}
.tpt-img .a {
 transition: all .40s ease-in-out;
	-webkit-transition: all .40s ease-in-out;
	-moz-transition: all .40s ease-in-out;
	-ms-transition: all .40s ease-in-out;
	-o-transition: all .40s ease-in-out
}
.tpt-img .b {
	opacity: 0;
	cursor: pointer;
	position: absolute;
	top: 250px;
	height: 100%;
	width: 100%;
}
.tpt-img:hover .b {
	opacity: 1;
	transform: translateY(-50px);
	-webkit-transform: translateY(-50px);
	-moz-transform: translateY(-50px);
	-ms-transform: translateY(-50px);
	-o-transform: translateY(-50px)
}
.tpt-img .c {
	z-index: 1;
	background: #8ec1cd;
	position: absolute;
	height: 100%;
	width: 100%
}
.tpt-img .d {
	z-index: 2;
	color: #fff;
	position: absolute;
	line-height: 50px;
	text-align: center;
	height: 100%;
	width: 100%
}

这样一个简单的图片列表缩放特效就完成了，当然，布局的方式有很多种，这只是其中一个方法，也欢迎大家留言分享一下其他的布局方式，谢谢观看！！！