"Video list thumbnails"
Bootstrap 3.2.0 Snippet by hoanghals

<link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"> <div class="container"> <ul class="list-unstyled video-list-thumbs row"> <li class="col-lg-3 col-sm-4 col-xs-6"> <a href="#" title="Claudio Bravo, antes su debut con el Barça en la Liga"> <img src="http://i.ytimg.com/vi/S4lSUBSxK8I/mqdefault.jpg" alt="Barca" class="img-responsive" height="130px" /> <h2>Việt Nam rúng động vụ học sinh phang ghế vào đầu bạn</h2> <i class="fa fa-play-circle-o"></i> <span class="duration">03:15</span> <span class="time">1 phút trước</span> </a> </li> <li class="col-lg-3 col-sm-4 col-xs-6"> <a href="#" title="Claudio Bravo, antes su debut con el Barça en la Liga"> <img src="http://i.ytimg.com/vi/Qf51_1Zf4RQ/mqdefault.jpg" alt="Barca" class="img-responsive" height="130px" /> <h2>Chuyển động 24h: Sốc với clip nữ sinh tại Trà Vinh đánh bạn bị u não, điếc 1 tai thwr ds lailsef</h2> <i class="fa fa-play-circle-o"></i> <span class="duration">03:15</span> <span class="time">1 phút trước</span> </a> </li> </ul> </div>
.video-list-thumbs{} .video-list-thumbs > li{ margin-bottom:12px } .video-list-thumbs > li:last-child{} .video-list-thumbs > li > a{ display:block; position:relative; background-color: #212121; color: #fff; padding: 0px; } .video-list-thumbs > li > a:hover{ background-color:#000; transition:all 500ms ease; box-shadow:0 2px 4px rgba(0,0,0,.3); text-decoration:none } .video-list-thumbs li h2{ font-size: 13px; padding-bottom: 4px !important; text-align: center; margin: 5px 2px 3px 0; line-height:18px; overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-flex:1; -webkit-box-orient:vertical } .video-list-thumbs .fa-play-circle-o{ font-size: 60px; opacity: 0.2; position: absolute; right: 39%; top: 31%; text-shadow: 0 1px 3px rgba(0,0,0,.5); } .video-list-thumbs > li > a:hover .fa-play-circle-o{ color:#fff; opacity:1; text-shadow:0 1px 3px rgba(0,0,0,.8); transition:all 500ms ease; } .video-list-thumbs .time{ background-color: rgba(0, 200, 240, 0.8); color: #fff; font-size: 11px; font-weight: bold; right: 0; line-height: 13px; padding: 4px; position: absolute; bottom: 44px; } .video-list-thumbs .duration{ background-color: rgba(0, 0, 0, 0.6); border-radius: 2px; color: #fff; font-size: 11px; font-weight: bold; left: 8px; line-height: 13px; padding: 4px; position: absolute; top: 8px; } .video-list-thumbs > li > a:hover .duration{ background: rgba(184, 44, 44, 0.9); transition:all 500ms ease; } @media (min-width:320px) and (max-width: 480px) { .video-list-thumbs .fa-play-circle-o{ font-size: 35px; right: 36%; top: 27%; } .video-list-thumbs h2{ bottom: 0; padding: 3px; font-size: 12px; height: 22px; margin: 8px 0 0; } }

Related: See More


Questions / Comments:

alo chi Ha cho e xin info theo hoc bootstrap voi :((

quydongnast () - 8 years ago - Reply 0