Programs video snippets

by Vladimir

HTML

<div class="cadr">
<img class="img" src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcTyz3UQgPgP47l_JO7LeP9U673Bvs1RkloHKXnymmtiUx4QT0Yj" />
<div class="img-info">Firefox 16.0<br />Обучающих видео: 13</div>
</div>
<div class="cadr">
<img class="img" src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcR_6j72fTkeAmAEdJPjJ1Gss9580AwkjvOATr06zG2vjgXnPI78" />
<div class="img-info">Opera 12.0<br />Обучающих видео: 8</div>
</div>
<div class="cadr">
<img class="img" src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcQODDLT_ObiaFMy2FQrWNPXnV1YgBlVEaL2SEOZmloqcAMZ_vn3" />
<div class="img-info">Skype 5.15<br />Обучающих видео: 24</div>
</div>

CSS

.cadr {
    border: 2px solid #000;
    overflow:hidden;
    width:120px;
    height:80px;
    font: 12px Verdana, sans-serif;
    float:left;
    cursor: pointer;
}
.img {
    display:block;
    position: relative;
    width:100%;
    height:100%;
}
.img-info {
    display:block;
    position: relative;
    width:100%;
    height:100%;
    color: #FFF;
    background: #000;
}

JavaScript

$('.cadr').click(function()
                  {
                      var t = this;
                      if(!$(t).hasClass('inverted')) {
                          $('.img', t).stop().animate({height:0}, 500);
                          $('.img-info', t).stop().animate({height:80}, 500);
                      } else {
                          $('.img-info', t).stop().animate({height:0}, 500);
                          $('.img', t).stop().animate({height:80}, 500);
                      }
                      $(t).toggleClass('inverted');                      
                  });

$(document).click(function(e)
                   {
                       if($(e.target).closest('.cadr').size()<1) {
                           $('.img-info').stop().animate({height:0}, 500);
                          $('.img').stop().animate({height:80}, 500);
                          $('.cadr').removeClass('inverted');                           
                   }
                   });