纯 CSS 打造产品放大展示效果

发布于：电脑网络, 精品推荐 725 次践踏

最近在研究用 WordPress 打造网上商城，其中最大的障碍就是技术问题，要让访客一眼认为这是一个在线商城而非博客，就必须让 WordPress 有在线商城的特点。所谓网上商城，就必须有足够吸引眼球的产品展示效果，之前我用 showfom 的 Auto HighSlide 插件，这是一款超轻量级自动图片效果插件，确实很不错，不过昨天路过芒果的网站，发现一个更适合我的实现方法：纯 CSS 打造产品放大展示效果。

将鼠标移至图片即可见产品放大展示效果：

small imagelarge image

效果和照片都很帅吧 :mrgreen:

言归正传说代码，首先是 html 结构，如下所示：

<div id="pic">
<a class="p1" href="#" title="small image"><img src="小图URL地址" alt="small image" title="small image"><img src="大图URL地址" alt="large image" class="large" title="large image"></a>
</div>

另外，还有至关重要的 CSS，以下 CSS 样式仅作参考：

#pic {
background-color:#FFF;
left:10px;
position:relative;
top:10px;
width:135px;
}

#pic a .large {
display:block;
height:1px;
left:-1px;
position:absolute;
top:-1px;
width:1px;
}

#pic a.p1,#pic a.p1:visited {
background:#FFF;
display:block;
height:180px;
left:0;
text-decoration:none;
top:0;
width:135px;
}

#pic a.p1:hover {
background-color:#8C97A3;
color:#000;
text-decoration:none;
}

#pic a.p1:hover .large {
border:1px solid #000;
display:block;
height:360px;
left:150px;
position:absolute;
top:-60px;
width:270px;
}

更多精彩 CSS 效果请见：《53个不可或缺的 CSS 技巧》