css给你灵感-漂亮的鼠标悬停图片说明

Freeren希望以下小小的效果，能给做网站设计的你提供些许灵感。

把鼠标移到图片上，看看出现了什么？

• freeren

  

  freeren

  freeren 网站标准 web标准 css xhtmlfreeren 网站标准 web标准 css xhtml

  freeren

  

  freeren

  freeren 网站标准 web标准 css xhtmlfreeren 网站标准 web标准 css xhtml

  freeren

  

  freeren

  freeren 网站标准 web标准 css xhtmlfreeren 网站标准 web标准 css xhtml

• 

  freeren

  freeren 网站标准 web标准 css xhtmlfreeren 网站标准 web标准 css xhtml
  

  freeren

  freeren 网站标准 web标准 css xhtmlfreeren 网站标准 web标准 css xhtml
  

  freeren

  freeren 网站标准 web标准 css xhtmlfreeren 网站标准 web标准 css xhtml

背景图片我做的不是很精细，如果您有更好的创意，可以留言哦。下面是代码
<!--　图片说明的第一种效果　freeren.org->
<style media="screen" type="text/css">

* {
    border:0;
    margin:0;
    padding:0;
    font-size:12px;
}

#roll h2{
    line-height:24px;
    color:14px;
    font-size:14px;
    }

#roll{
    font-size:12px;
}
    
#roll a{
    width:130px;
    display:block;
    float:left;
    line-height:24px;
    color:#000;
    margin:5px;
    text-decoration:none;
    }
    
#roll a img{
    margin-top:24px;
    }
    
#roll a span, #roll a:hover h3{
    display:none;
    }
    
#roll a:hover{
    background-color:#ffaa00;
    color:#fff;
}

#roll a:hover img{
    margin-top:0px;
    }
    
#roll a:hover span{
    display:block;
    }
    
#roll a:hover span p{
    width:120px;
    position:absolute;
    display:block;
    padding:0 5px 5px 5px;
    background-color:#ffaa00;
    margin:0px;
    }
</style>

<ul id="roll">
    <li>
        <a  href="#">
            <span><h2>freeren</h2></span>
            <img alt="freeren" src="/static/userfiles/Image/design/article/103/pic3.jpg" />
            <h3>freeren</h3>
            <span>
                <p>freeren 网站标准 web标准 css xhtmlfreeren 网站标准 web标准 css xhtml</p>
            </span>
        </a>
        <a  href="#">
            <span><h2>freeren</h2></span>
            <img alt="freeren" src="/static/userfiles/Image/design/article/103/pic3.jpg" />
            <h3>freeren</h3>
            <span>
                <p>freeren 网站标准 web标准 css xhtmlfreeren 网站标准 web标准 css xhtml</p>
            </span>
        </a>
        <a  href="#">
            <span><h2>freeren</h2></span>
            <img alt="freeren" src="/static/userfiles/Image/design/article/103/pic3.jpg" />
            <h3>freeren</h3>
            <span>
                <p>freeren 网站标准 web标准 css xhtmlfreeren 网站标准 web标准 css xhtml</p>
            </span>
        </a>
    </li>       
</ul>

关键点：鼠标移动到图片上时，上面的标题会把图片顶下去，让图片静止不上下串动，加上
#roll h2{
    line-height:24px;}
#roll a img{
    margin-top:24px;
    } 
#roll a:hover img{
    margin-top:0px;
    }
让说明文字浮动起来，不会把下面的内容顶下去。加上
#roll a:hover span p{
    position:absolute;
    }
这里的span不仅起到了隐藏显示的作用，而且起到了定位的作用。

<!--图片说明的第二种效果　freeren.org-->
<style type="text/css" media="screen">

* {
    border:0;
    margin:0;
    padding:0;
    font-size:12px;
}
   
#roll_img a{
    width:130px;
    display:block;
    float:left;
    line-height:24px;
    color:#000;
    margin:5px;
    text-decoration:none;
    z-index:999;
    }
    
#roll_img a span{
    display:none;
    }
    
#roll_img a:hover{
    color:#fff;
    background:#fff;
}

#roll_img a:hover div{
    display:block;
    }
    
#roll_img a:hover div span{
    width:124px;
    height:144px;
    position:absolute;
    z-index:1;
    display:block;
    padding:8px 50px 8px 35px;
    margin:-130px 0 0 100px;
    background:url(/static/userfiles/Image/design/article/103/des_bg.gif) no-repeat top left;
    }
    
</style>

<ul id="roll_img">
    <li>    
        <a href="#">
            <img src="images/pic3.jpg" alt="freeren" />
            <div>
                <span>
                    <h2>freeren</h2>
                    freeren 网站标准 web标准 css xhtmlfreeren 网站标准 web标准 css xhtml
                </span>
            </div>
        </a>
        
        <a href="#">
            <img src="images/pic4.jpg" alt="freeren" />
            <div>
                <span>
                    <h2>freeren</h2>
                    freeren 网站标准 web标准 css xhtmlfreeren 网站标准 web标准 css xhtml
                </span>
            </div>
        </a>
        
        <a href="#">
            <img src="images/pic5.jpg" alt="freeren" />
            <div>
                <span>
                    <h2>freeren</h2>
                    freeren 网站标准 web标准 css xhtmlfreeren 网站标准 web标准 css xhtml
                </span>
            </div>
        </a>    
    </li>
</ul>

关键点：让说明文字浮动，加上
#roll_img a:hover div span{position:absolute;}
span外的div是起到隐藏显示和定位的作用，这样，margin就起作用了。如果用top和left，要给每个span单元写样式，非常麻烦。

让说明文字在背景框里不跑出来。加上
#roll_img a:hover div span{
    width:121px;
    height:144px;
    padding:8px 12px 8px 35px;
    }

这张背景图共宽168px，减去左面12px，减去右面的35px，里面的容下文字块宽121px。

我想如果背景图是png的透明并带阴影的图片，会漂亮一些。