<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.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 ----------> <div class="container"> <ul class="list-unstyled video-list-thumbs row"> <li class="col-lg-5 col-sm-4 col-xs-6"> <a href="#" title="UTI Video Text"> <img src="http://i.ytimg.com/vi/1EATvn5yJ4U/maxresdefault.jpg" alt="Barca" class="img-responsive" height="130px" /> <h2>UTI Video</h2> <span class="glyphicon glyphicon-play-circle"></span> <span class="duration">03:15</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: #111; color: #fff; padding: 8px; border-radius:3px transition:all 500ms ease-in-out; border-radius:4px } .video-list-thumbs > li > a:hover{ box-shadow:0 2px 5px rgba(0,0,0,.3); text-decoration:none } .video-list-thumbs h2{ bottom: 0; font-size: 14px; height: 33px; margin: 8px 0 0; } .video-list-thumbs .glyphicon-play-circle{ font-size: 100px; opacity: 0.6; position: absolute; right: 42%; top: 26%; text-shadow: 0 1px 3px rgba(0,0,0,.5); transition:all 500ms ease-in-out; } .video-list-thumbs > li > a:hover .glyphicon-play-circle{ color:#fff; opacity:1; text-shadow:0 1px 3px rgba(0,0,0,.8); } .video-list-thumbs .duration{ background-color: rgba(0, 0, 0, 0.4); border-radius: 2px; color: #fff; font-size: 11px; font-weight: bold; left: 12px; line-height: 13px; padding: 2px 3px 1px; position: absolute; top: 12px; transition:all 500ms ease; } .video-list-thumbs > li > a:hover .duration{ background-color:#000; } @media (min-width:320px) and (max-width: 480px) { .video-list-thumbs .glyphicon-play-circle{ font-size: 35px; right: 36%; top: 27%; } .video-list-thumbs h2{ bottom: 0; font-size: 12px; height: 22px; margin: 8px 0 0; } }