仿6room网站图片链接效果(一)

核心提示： 一、实例实现功能介绍默认情况下，一个带有一定边框的图片链接放置在网页中，仿6room网站图片链接效果(一)(2)，图片链接左下角还有一个“+”图形，意为添加到收藏夹或者视频播放列表吧（我这里没有加入脚本，就可以随意在网页上任意地方安排它们位置，效果不会发生改变，只讲

一、实例实现功能介绍

默认情况下，一个带有一定边框的图片链接放置在网页中，图片链接左下角还有一个“+”图形，意为添加到收藏夹或者视频播放列表吧（我这里没有加入脚本，只讲界面的实现），当鼠标移到链接图片区域上面时，会出现一个半透明链接简要说明层盖在图片上面，说明层的文字前边还有一个小的网站LOGO，说明层周围还会跟着出现一条黄色的边框，同时鼠标移到左下角“+”图形上，它的颜色会发生变化，而且像这样的结构一旦做好了，就可以随意在网页上任意地方安排它们位置，效果不会发生改变。下面是实例效果截图。

实例效果截图

二、结构和样式代码

1．结构

<div class="blueidea"><a href="#"><img src=http://tech.ddvip.com/2009-05/"http://www.hsptc.com/cssImg/pic1.jpg" alt="" /><span> 80万网民追捧全球最性感女主播</span></a><em title="我要收藏"></em></div>

<div class="blueidea"><a href="#"><img src=http://tech.ddvip.com/2009-05/"http://www.hsptc.com/cssImg/pic2.jpg" alt="" /><span>根据韩寒作品改编电视剧《三重门》</span></a><em title="我要收藏"></em></div>

<div class="blueidea"><a href="#"><img src=http://tech.ddvip.com/2009-05/"http://www.hsptc.com/cssImg/pic3.jpg" alt="" /><span>CG少女（3维立体,比真人还漂亮）</span></a><em title="我要收藏"></em></div>


<div class="blueidea"><a href="#"><img src=http://tech.ddvip.com/2009-05/"http://www.hsptc.com/cssImg/pic2.jpg" alt="" /><span>根据韩寒作品改编电视剧《三重门》</span></a><em title="我要收藏"></em></div>

<div class="blueidea"><a href="#"><img src=http://tech.ddvip.com/2009-05/"http://www.hsptc.com/cssImg/pic3.jpg" alt="" /><span>CG少女（3维立体,比真人还漂亮）</span></a><em title="我要收藏"></em></div>

<div class="blueidea"><a href="#"><img src=http://tech.ddvip.com/2009-05/"http://www.hsptc.com/cssImg/pic2.jpg" alt="" /><span>根据韩寒作品改编电视剧《三重门》</span></a><em title="我要收藏"></em></div>

<div class="blueidea"><a href="#"><img src=http://tech.ddvip.com/2009-05/"http://www.hsptc.com/cssImg/pic3.jpg" alt="" /><span>CG少女（3维立体,比真人还漂亮）</span></a><em title="我要收藏"></em></div>