原理：利用css樣式實現滑鼠移入加一層遮罩的效果。將遮罩層absolute定位到要新增遮罩層的上面，滑鼠移入讓他顯示。

程式碼片：
html:

<div class="ai_demo" >  
    <div class="price">  
        <div class="content">  
        <p class="price">Huskie</p>  
            <p class="intro">  introduction introduction introduction</p
 
>  
        </div>  
    </div>  
    <div class="btn"><a href="#">like it?</a><a href="#">hate it?</a><a href="#">buy it!</a></div>  
</div> 

CSS

.ai_demo{width: 250px; height: 250px; background:url("http://www.magpet.cn/images/upload/Image/87076179_snap(25).jpg"
 
)  no-repeat scroll 0 0/100% 100% content-box content-box; background:url("http://www.magpet.cn/images/upload/Image/87076179_snap(25).jpg") 50% 50% \9;  position: relative;}  
     .ai_demo .btn{ padding: 225px 0 0 80px; text-align: right; position: relative;z-index: 999;}  
     .ai_demo .btn > a{ line-height: 22px
 
; padding:3px 5px; margin-right: 1px; color: #fff; background: #84654e; font-size: 12px; text-decoration: none;}  
     .ai_demo div.price{ display: none;}  
     .ai_demo:hover  div.price > .content{  padding-top:70px; text-align: center;}  
     .ai_demo:hover  div.price > .content p.price,.ai_demo:hover  div.price > .content p.intro{ color: #fff; padding: 0 5%; font-size: 24px;}  
     .ai_demo:hover  div.price > .content p.intro{ font-size: 14px;}  
     .ai_demo:hover  div.price{ width: 100%; height: 250px; display: block; background: #000; opacity: .5; -moz-opacity: .5; filter:alpha(opacity=50); position: absolute; top: 0; left: 0;}