<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="row"> <div class="span4 col-sm-4 col-md-3"> <div class="thumbnail"> <a href="#"> <img src="https://kaltura.it.spbu.ru/p/101/sp/10100/thumbnail/entry_id/0_hkoywdo8/version/100002/acv/102/height/320" alt="..."> <div class="thumb_icon label-inverse"> <p class="thumb_icon_content"> <i class="icon-film icon-white"></i> 1:42 </p> </div> <div class="thumb_time label-inverse"> <p class="thumb_time_content"> 13 <i class="icon-eye-open icon-white"></i> </p> </div> <div class="caption"> <p class="ellipsis">41 международная </p> </div> </a> </div> </div> <div class="span4 col-sm-4 col-md-3"> <div class="thumbnail"> <div class="caption"> <p class="ellipsis">Круглый стол "Развитие институтов гражданского общества на региональном уровне: специфика, проблемы, тенденции". : апреля 2011 г.</p> </div> <img src="https://kaltura.it.spbu.ru/p/101/sp/10100/thumbnail/entry_id/0_hkoywdo8/version/100002/acv/102/height/320" alt="..."> </div> </div> <div class="span4 col-sm-4 col-md-3"> <div class="thumbnail"> <div class="caption"> <p class="ellipsis">Международная конференция "СМИ в современном мире. Петербургские чтения"</p> <p>short thumbnail description</p> <p><a href="" class="label label-danger">Zoom</a> <a href="" class="label label-default">Download</a></p> </div> <img src="https://kaltura.it.spbu.ru/p/101/sp/10100/thumbnail/entry_id/0_hkoywdo8/version/100002/acv/102/height/320" alt="..."> </div> </div> <div class="span4 col-sm-4 col-md-3"> <div class="thumbnail"> <div class="caption"> <h4>Движущиеся элементы фокусирует на себе внимание, так, кнопка с меняющимся цветом позволила увеличить CTR. IE10, Chrome, Safari, Firefox поддерживают свойство</h4> <p>short thumbnail description</p> <p><a href="" class="label label-danger">Zoom</a> <a href="" class="label label-default">Download</a></p> </div> <img src="https://kaltura.it.spbu.ru/p/101/sp/10100/thumbnail/entry_id/0_hkoywdo8/version/100002/acv/102/height/320" alt="..."> </div> </div> </div> <div class="row"> <div class="col-xs-12 text-center"> Original <a href="http://bootsnipp.com/snippets/featured/thumbnail-caption-hover-effect">Thumbnail Caption Hover Effect</a> by <a href="http://bootsnipp.com/sevenx.de">sevenx.de</a> </div> </div> </div><!-- /.container -->

body { padding-top:50px; } .thumbnail { position:relative; overflow:hidden; } .caption { position:absolute; right:4px; bottom:4px; left:4px; background:rgba(0,0,0,0.75); overflow:hidden; max-height:1em; text-align:center; color:#fff!important; -webkit-transition:all .4s ease-in-out; -moz-transition:all .4s ease-in-out; -o-transition:all .4s ease-in-out; -ms-transition:all .4s ease-in-out; transition:all .4s ease-in-out; font-size:13px; font-style:italic; } .thumbnail:hover .caption { max-height:3.4em; } .thumbnail .caption { line-height:16px; padding:3px 5px 6px; } .ellipsis { overflow:hidden; white-space:nowrap; text-overflow:ellipsis; } .thumbnail:hover .ellipsis { overflow:visible; white-space:normal; text-overflow:visible; } div.thumb_time { color:#fff; font-size:10.9px; opacity:0.9; position:absolute; right:4px; top:4px; } div.thumb_icon { color:#fff; font-size:10.9px; left:4px; opacity:0.9; position:absolute; top:4px; margin:0; } p.thumb_time_content,p.thumb_name_content,p.channel_content,p.channel_stats_content,p.thumb_icon_content { padding-right:5px; padding-left:5px; margin:0; } p.thumb_time_content,p.thumb_name_content,p.channel_content,p.channel_stats_content { padding-left:5px; padding-right:5px; margin:0; } .thumbnail a { color:#fff; text-decoration:none; } .thumbnail img { overflow:hidden; -moz-transition:all 1.5s ease-in-out; -o-transition:all 1.5s ease-in-out; -webkit-transition:all 1.5s ease-in-out; } .thumbnail:hover img { -webkit-transform:scale(1.2); -moz-transform:scale(1.2); -o-transform:scale(1.2); } .thumb_time_content .icon-eye-open.icon-white,.thumb_icon_content .icon-film.icon-white { vertical-align:text-bottom; }