CSS技巧分享：如何用css制作图片特效
1、首先我们用<ul><li>标签写一个图片列表，并分别命名<li>标签为：pic1，pic2，pic3
<div class="picbox">
<ul>
<li class="pic1"><a href="#"> </a></li>
<li class="pic2"><a href="#"> </a></li>
<li class="pic3"><a href="#"> </a></li>
</ul>
</div>
2、 接下来，我们给picbox添加css样式，使它横排显示，我们先清除<ul><li>标签的默认样式和浏览器默认的margin和padding值，然后在用css进行样式美化。
*{ margin:0;padding:0;}
ul,li{ list-style:none;}
.picbox ul li{ float:left; margin-left:20px; margin-top:20px;}
.picbox ul li a{ width:200px; height:200px; display:block; padding:1px; border:1px solid #ccc;}
.pic1 a{ background:url(img1.jpg) no-repeat center;}
.pic2 a{ background:url(img2.jpg) no-repeat center;}
.pic3 a{ background:url(img3.jpg) no-repeat center;}
我们用浏览器打开预览一下效果。
3、 我们给pic1添加鼠标滑动后，图片边框加粗变红效果（效果一）：
.pic1 a:hover{ border:2px solid #f00; padding:0px;}
刷新浏览器预览效果
4、我们给pic2添加鼠标滑动后，图片背景去色效果（效果二）：
首先我们用ps打开pic2的背景图片，选择 图像——调整——去色 将图片去色变为黑白色以备用。
然后我们添加滑动样式：.pic2 a:hover{ background:url(img4.jpg) no-repeat center;}
刷新浏览器预览效果
5、 我们给pic3添加鼠标滑动后，弹出图片标题效果（效果三）：
我们先修改html代码，给pic3里面加上<h2>图片标题</h2>
<div class="picbox">
<ul>
<li class="pic1"><a href="#"> </a></li>
<li class="pic2"><a href="#"> </a></li>
<li class="pic3"><a href="#"> </a>
<h2>图片标题</h2>
</li>
</ul>
</div>
我们给.pic3添加相对定位，给pic3 下的 <h2>添加绝对定位，并给它添加display:none使其隐藏，等鼠标滑动到pic3时再给其添加display:block让其显示。
.pic3{ position:relative;}
.pic3 h2{ width:204px; height:30px; line-height:30px; background:#666; color:#fff; text-align:center; position:absolute; top:170px; left:0; display:none;}
.pic3:hover h2{ display:block;}
刷新浏览器预览效果
6、 到这里三种简单的css图片效果就做完了，大家也可自己尝试着去试试其它的样式效果，感谢大家的浏览。