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

  最近在研究用 Wordpress 打造网上商城,其中最大的障碍就是技术问题,要让访客一眼认为这是一个在线商城而非博客,就必须让 Wordpress 有在线商城的特点。所谓网上商城,就必须有足够吸引眼球的产品展示效果,之前我用 showfomAuto 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 技巧》

本文已盖 37 层楼

  1. 这个效果真的不错,老万没有考虑下写成插件?

  2. 回复 蛋卷 说:

    第三次看到真人

  3. 回复 hsforever 说:

    我第一看感觉怎么觉得你和张三很像?

  4. 回复 张三 说:

    老万。。。你竟然自曝照片也不吭声。。。没发现……

  5. 回复 爱旅游 说:

    小伙真帅,这效果就是不错~~~~

  6. 回复 阿东 说:

    想问一下博主你这风景是桂林的吗?》

  7. 回复 老饕 说:

    终于看到庐山真面目!!

  8. 回复 Leo.N 说:

    这个必须顶,很有用的说。

  9. 回复 短歌行 说:

    我看你可以把博客名改为WP代码之家了吧,呵呵。

  10. 回复 午夜 说:

    :lol: 擦擦,老弟,自爆了···

  11. 回复 蛋王 说:

    这个方法很早前见过,哈。
    不过。。我觉着效果不咋滴,不太有美感。难道是照片中没有 美女的原因? :mrgreen:

  12. 回复 卢松松 说:

    这照片不会就是万戈你本人吧?

  13. 回复 小明猪 说:

    你确定大我两岁,好像跟我一样大嘛~~ :oops:

  14. 这个方法不错。至于万戈玉照么。。。华丽地飘过了 :cool:

  15. 回复 happyet 说:

    多么迷离的眼神啊 :oops:

  16. 回复 林木木 说:

    啧啧,终于有图像与“万戈”(总感觉是“哥”)建立联系了!

  17. 回复 Showfom 说:

    嗯 这个好 万戈长得超级猥琐%……% :mrgreen:

  18. 回复 boluor 说:

    哈哈,终于看到照片了啊

    比我想象中的帅多了嘛 :mrgreen:

  19. 回复 牧狼羊 说:

    万戈同学,非常帅……

Leave a comment

您已输入0

三言两语

我的生活心情语录

工作手札

路漫漫其修远兮

精品推荐

好东西要分享

嘻哈娱乐

八卦趣事一笑而过

电脑网络

全新技术尽搜罗

转来载去

文人墨客美文赏析