带有淡出字幕jQuery的缩略图

时间:2012-02-13 22:05:41

标签: jquery html css

谁能告诉我这里缺少什么:

http://www.latitude18films.com/webtest/international.html

我的所有带有褪色字幕的缩略图都在工作,除了演员......这里的任何人都知道为什么? 右键单击页面即可查看源。

这是我的css代码:

/*thumpnail css stylesheet casting directors*/
.itemCD {
    width:407px;
    height:247px;   
    /*border:4px solid #222;*/  
    /*margin:5px 5px 5px 0;*/

    /* required to hide the image after resized */
    overflow:hidden;

    /* for child absolute position */
    position: relative;

    /* display div in line */
    float:left;
}

.itemCD .captionCD {
    width:407px;
    height:247px;
    background:#000;
    color:#fff;
    font-size: 14px;
    font-weight:bold;

    /* fix it at the bottom */
    position:absolute;
    left:0;

    /* hide it by default */
    display:none;

    /* opacity setting */
    filter:alpha(opacity=80);    /* ie  */
    -moz-opacity:0.8;    /* old mozilla browser like netscape  */
    -khtml-opacity: 0.8;    /* for really really old safari */  
    opacity: 0.8;    /* css standard, currently it works in most modern browsers like firefox,  */

}

.itemCD .captionCD a {
    text-decoration:none;
    color:#585A5C;
    font-size:17px; 
    font-weight: normal;

    /* add spacing and make the whole row clickable*/
    padding:0 5px 0 0;
    display:block;
}

.itemCD .captionCD p {
    padding:5px;    
    margin:0;
    font-size:10px;
}

.imgCD {
    border:0;

    /* allow javascript moves the img position*/
    position:absolute;
}

.clear  {
    clear:both; 
}

2 个答案:

答案 0 :(得分:1)

在您的CD代码中,您遗漏了class代码的img定义,请使用以下代码段替换,并看到您的淡化效果又回来了!

<DIV class="itemCD"><A href="http://www.latitude18films.com/webtest/international.html#"><IMG title="" class="imgCD" border="0" alt="Casting Diretors" src="Latitude18films_files/casting-directors.jpg" width="407" height="247"></A>

希望这会有所帮助。 :)

答案 1 :(得分:0)

出于某种原因,captionCD位于铸造区块下方。

如果您将top: 0;添加到captionCD类定义中,则可以使用。