Спойлер как в вк

by Axelvaisper

HTML

<div class="featurebox holder">
    <li><img src="http://placehold.it/200x118" alt="events" /></li>
     <div class="cover featuretext">
        <h3 class="date">Заглавие</h3>
        <p>Суперрыбатекст робот который живёт на крыше вместе с демоном у окна на чердаке с карлосоном по соседству))<a href="http://vk.com/vampireos" target="_BLANK">Читать меня)</a></p>
      </div>
</div>

CSS

.featurebox h3{ 
        color:#ffffff;
        margin-top:0px; 
        margin-bottom:0px; 
        padding-left:5px; 
        font:11pt;  
        font-weight: bold;  
    }

.featurebox{ 
        color:#ffffff;
        width: 195px; 
        height: 118px;  
        float:left; 
        /*border: solid 2px #8399AF;*/ 
        overflow: hidden;
        position: relative; 
    }


/*caption para text*/               
.featurebox p{ 
        margin-top:0px;
        padding-left: 5px; 
    padding-right:5px; 
font-size:12px;
    }

/*caption slider */             
.featuretext{ 
    line-height:18px;
        top:99px;
        float: left; 
        position: absolute; 
        background: #000; 
        height: 130px; 
        width: 100%; 
        opacity: .8; 
        /* For IE 5-7 */
        filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
        /* For IE 8 */
        -MS-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
    }



.holder .featuretext {
        top: 220;
        left: 0;
    }

.featurebox p a  {
        float: right;
        color:#FFFF00;
    }

JavaScript

$(document).ready(function(){   
    $('.featurebox.holder').hover(function(){
    $(".cover", this).stop().animate({top:'0'},{queue:false,duration:160});
    }, function() {
        $(".cover", this).stop().animate({top:'100px'},{queue:false,duration:160});
    });
});