bb boxes

by oterox

HTML

<li class="trip odd"><div class="caption">
<div class="boxgrid">

<div class="cover boxcaption" style="top: 240px;">
<h3>Trip Features </h3>
<a class="dettagli" href="/index.php?option=com_k2&view=item&id=340:viaggio-in-islanda-reykjavik&Itemid=180">dettagli</a>
<div class="clear"></div>
<ul>
<li class="hotel">4 stelle BB</li>
<li class="voli">a/r dall'Italia</li>
<li class="extra">trasferimenti </li>
<li class="extra">escursioni</li>
</ul>
</div>
</div>

</li>

CSS

.boxgrid{ 
                width: 450px; 
                height: 303px; 
                float:left; 
                
                overflow: hidden; 
                position: relative; 
            }
                .boxgrid img{ 
                    position: absolute; 
                    top: 0px; 
                    left: 0px; 
                    border: 0; 
                    width: 450px; height: 303px;
                }
                .boxgrid p { 
                    padding: 0 10px; 
                    color:#ffffff; 
                    font-weight:bold; 
                    font:10pt "Lucida Grande", Arial, sans-serif; 
                }
                
            .boxcaption { 
                text-align: left;
                cursor: pointer;
                float: left; 
                position: absolute; 
                background: #000; 
                width: 450px; 
                height: 303px; 
                background: url('/images/black_bg.png') repeat;

             }
             
            .boxcaption a.dettagli { float: right;  margin: 16px 20px; }
            .boxcaption h3 { float: left; margin: 20px 30px !important; color:#FFF; font:18px tahoma; text-align: left;  }
            

                 .caption .boxcaption {
                     top: 240px;
                     left: 0px;
                 }
                .caption {    
                    height: 303px;
                    width: 450px;
                    padding: 4px;
                    border: 1px solid #DDDDDD;
                }
                .trip .caption { background: none; }
                .trip > h2 > img { float: left; }
                .trip > h2 > a { line-height: 25px; padding-left: 10px; }
                .boxcaption ul li {  background-position: 30px 0; padding-left: 70px; color: #DDDDDD;
                                    float: left;
                                    line-height: 15px;
                                   ...

JavaScript

$(document).ready(function() {
    $('.boxgrid').hover(function() {
        $(".cover", this).stop().animate({
            top: '0px'
        }, {
            queue: false,
            duration: 170
        });
    }, function() {
        $(".cover", this).stop().animate({
            top: '240px'
        }, {
            queue: false,
            duration: 170
        });
    });
});