<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 ---------->
<div class="row">
<!-- Start Video Object -->
<div class="col-md-4 video-clip">
<div class="video">
<img src="http://fc01.deviantart.net/fs71/i/2014/172/b/5/temperate_glass_by_dmmdesign-d7nf32n.png"/>
</div>
<div class="play-overlay"><a href="#" class="glyphicon glyphicon-play" data-toggle="modal" data-target="#myModal"></a></div>
<div class="video-content">
<div class="glyphicon glyphicon-time"><span class="post-date">Posted July 12, 2014</span></div>
<div class="description">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos consectetur eum, rem, magnam nam, cum, officia vel sequi dolores dolore error alias!</div>
</div>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h4 class="modal-title" id="myModalLabel">Title of the Selected Video Goes Here</h4>
</div>
<div class="modal-body">
Present a Video here...
</div>
</div>
</div>
</div>
</div>
<!-- End of Video Object -->
<!-- Start Video Object -->
<div class="col-md-4 video-clip">
<div class="video">
<img src="http://fc01.deviantart.net/fs71/i/2014/172/b/5/temperate_glass_by_dmmdesign-d7nf32n.png"/>
</div>
<div class="play-overlay"><a href="#" class="glyphicon glyphicon-play" data-toggle="modal" data-target="#myModal2"></a></div>
<div class="video-content">
<div class="glyphicon glyphicon-time"><span class="post-date">Posted July 12, 2014</span></div>
<div class="description">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos consectetur eum, rem, magnam nam, cum, officia vel sequi dolores dolore error alias!</div>
</div>
<!-- Modal -->
<div class="modal fade" id="myModal2" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h4 class="modal-title" id="myModalLabel">Title of the Selected Video Goes Here</h4>
</div>
<div class="modal-body">
Present a Video here...
</div>
</div>
</div>
</div>
</div>
<!-- End of Video Object -->
<!-- Start Video Object -->
<div class="col-md-4 video-clip">
<div class="video">
<img src="http://fc01.deviantart.net/fs71/i/2014/172/b/5/temperate_glass_by_dmmdesign-d7nf32n.png"/>
</div>
<div class="play-overlay"><a href="#" class="glyphicon glyphicon-play" data-toggle="modal" data-target="#myModal3"></a></div>
<div class="video-content">
<div class="glyphicon glyphicon-time"><span class="post-date">Posted July 12, 2014</span></div>
<div class="description">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos consectetur eum, rem, magnam nam, cum, officia vel sequi dolores dolore error alias!</div>
</div>
<!-- Modal -->
<div class="modal fade" id="myModal3" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h4 class="modal-title" id="myModalLabel">Title of the Selected Video Goes Here</h4>
</div>
<div class="modal-body">
Present a Video here...
</div>
</div>
</div>
</div>
</div>
<!-- End of Video Object -->
</div>
@import url(http://fonts.googleapis.com/css?family=Lato:300,400,700);
@import url(http://fonts.googleapis.com/css?family=Rokkitt);
body {
padding-top: 5%;
background-color: #eee;
}
.row {
margin-left: 20%;
}
.col-md-2 {
display: block;
position: relative;
margin: 0 10px;
}
.video > img, .play-overlay {
position: absolute;
width: 200px;
height: 135px;
}
.play-overlay {
display: none;
background-color: rgba(0,0,0,0.45);
}
.glyphicon-play {
position: relative;
color: #CCC;
font-size: 4em;
top: 27%;
left: 38%;
transition: color 0.5s ease;
}
.glyphicon-play::hover {
color: #fff;
-webkit-transition: color 0.5s ease;
-moz-transition: color 0.5s ease;
-o-transition: color 0.5s ease;
-ms-transition: color 0.5s ease;
transition: color 0.5s ease;
text-decoration: none;
}
.video-content {
position: absolute;
top: 136px;
color: #eee;
display: block;
width: 200px;
height: 135px;
z-index: 200;
background: linear-gradient(180deg, #22313F, #34495E);
}
.glyphicon-time {
color: #bbb;
padding: 10px 0 0 10px;
}
.post-date {
color: #BBB;
font-family: 'Rokkitt';
text-transform: uppercase;
padding-left: 5px;
font-size: 14px;
letter-spacing: 1px;
}
.description {
font-family: 'Lato';
font-size: 12px;
padding: 5px 15px;
color: #eee;
}
@media(max-width: 767px) {
.video-clip:not(:first-child) {
margin-top: 155px;
}
}
// Hides all video descriptions
$('.video-content').hide();
$('.video-clip').on('mouseenter',function(event) {
$(this).find('.play-overlay').fadeIn('slow');
$(this).find('.video-content').slideToggle('slow');
}).on('mouseleave', function(event) {
$(this).find('.play-overlay').fadeOut('slow');
$(this).find('.video-content').slideToggle('slow');
});
