“鼠標移到圖片上，從底部向上滾動出半透明遮罩顯示文字效果，鼠標移走後遮罩層消失。”這是一種very very 常見的一種圖片特效。下面我們給大家詳細介紹一下。
實現代碼如下：
在線測試
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS3實現圖片文字介紹滑動展示效果</title>
<style type="text/css">
#info
{
width:760px;
margin:0 auto;
}
/*定義外層樣式*/
.wrap
{
width:220px;
height:330px;
float:left;
position:relative;
overflow:hidden;
font-family:arial, sans-serif;
}
.wrap img
{
border:0;
width:220px;
height:330px;
}
.wrap p
{
display:block;
width:220px;
height:330px;
position:absolute;
left:0;
top:300px;
background-color:rgba(0,0,0,0.3);/*使用CSS3 RGBA顏色值*/
font-size:12px;
color:#FFFFFF;
padding:0;
margin:0;
line-height:16px;
transition: all 0.6s ease-in-out;/*定義CSS3過渡效果,all表示過渡屬性針對所有值有變化的CSS屬性*/
}
.wrap p b
{
display:block;
font-size:22px;
color:#fc0;
text-align:center;
margin:0;
padding:0;
line-height:30px;
}
.wrap p span
{
display:block;
padding:10px;
line-height:20px;
}
.wrap:hover p {top:0;}
</style>
</head>
<body>
<div id="info">
<div class="wrap">
<img src="../App_images/lesson/run_css3/pic1.jpg" alt="">
<p>
<b>Red Eye Frog</b>
<span>Red-eyed tree frogs, as their name states, have bold red eyes with vertically narrowed pupils, a vibrant green body with yellow and blue striped sides, and orange toes. There is a great deal of regional variation in flank and thigh coloration.<br/>Although it has been suggested that A. callidryas' bright colors function as aposematic or sexual signals, neither of these hypotheses have been confirmed.</span>
</p>
</div>
<div class="wrap">
<img src="../App_images/lesson/run_css3/pic2.jpg" alt="">
<p>
<b>Emperor Penguin</b>
<span>The Emperor Penguin (Aptenodytes forsteri) is the tallest and heaviest of all living penguin species and is endemic to Antarctica.<br><br>The male and female are similar in plumage and size, reaching 122 cm (48 in) in height and weighing anywhere from 22.37 kg (48.82 lb). The dorsal parts are black and sharply delineated from the white belly, pale-yellow breast and bright-yellow ear patches.</span>
</p>
</div>
<div class="wrap">
<img src="../App_images/lesson/run_css3/pic3.jpg" alt="">
<p>
<b>Pelicans</b>
<span>A pelican is a large water bird with a distinctive pouch under the beak, belonging to the bird family Pelecanidae.<br><br>Along with the darters, cormorants, gannets, boobies, frigatebirds, and tropicbirds, pelicans make up the order Pelecaniformes. Modern pelicans are found on all continents except Antarctica.</span>
</p>
</div>
</div>
</body>
</html>
在浏覽器預覽效果如下：
分析：
當鼠標移到圖片上面時，文字介紹會過渡性滑動展示，效果如下：
這個特效中用到了CSS3過渡、RGBA顏色等。
有些人會有疑問，之前我們都是把過渡效果代碼放在:hover事件中，為什麼把“transition: all 0.6s ease-in-out;”這句代碼放在“.wrap p{}”中，而不是放在“.wrap:hover p{}”中呢？哈哈，能觀察到這一點的肯定是一位細心的人。具體原因我就不直說了，老是說得那麼直白也沒意思。大家自行測試一下，可以說說自己的見解。