纯CSS图片流畅缩放显示详情特效代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是纯CSS图片流畅缩放显示详情特效代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>纯CSS图片流畅缩放显示详情</title>
<link type="text/css" href="css/zzsc.css" rel="stylesheet" />
</head>

<body>
<!-- 代码 开始 -->  
<div class="bd view view-first">
	<a target="_blank" href="#" class="new-product-image"><img width="190" height="190" src="images/pic-190-190.jpg"></a>
	<div class="mask">
		<h4 class="title"><a title="索尼全幅微单实拍" class="text-hide" target="_blank" href="#">索尼全幅微单实拍</a></h4>
		<p class="text">之前Sony正式发表两款史上首度登场的全幅微单A7、A7R，新机规格符合先前情报。这次我们就拿到这两款热机来拍摄，美女美景一个也不少。</p>
	</div>
</div>
<!-- 代码 结束 -->
</body>
</html>

CSS代码(zzsc.css):

/* CSS Document */
body{padding:0;margin:0;}
img{border:none;}
.view-first{position:relative;}
.view-first img{-webkit-transition:all .2s ease-in;-moz-transition:all .2s ease-in;-o-transition:all .2s ease-in;-ms-transition:all .2s ease-in;transition:all .2s ease-in;}
div.mask-hover img,.view:hover img{width:100px;height:100px;}
.view{position:relative;text-align:center;cursor:default;width:190px;height:235px;margin-left:auto;margin-right:auto;overflow:hidden;}
.view .mask{width:160px;overflow:hidden;margin:0 auto;}
.view .title{text-align:center;position:relative;font-size:12px;margin-top:16px;height:20px;line-height:20px;}
.view .title a{color:#666;text-decoration:none;}
.view .text{position:relative;text-align:left;font:normal 12px/16px '宋体';color:#999;}

附件:下载该文件资源,减少时间成本(增值服务)