<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 ---------->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<a href="/drink-number/2?s=" class="long-grid-signpost tile popular">
<span class="iconic iconic-thumb-up"></span>
<h3 class="title">Newest</h3>
</a>
<div class="clear" style="width:100%;height:100px;"></div>
<div class="container">
<header id="myCarousel" class="carousel slide">
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<div class="carousel-inner" role="listbox">
<div class="item active">
<div class="row">
<div class="col-md-2 col-sm-6">
<div class="card"> <img class="img-fluid" src="http://grafreez.com/wp-content/temp_demos/river/img/media-1.jpg" alt="">
<div class="card-img-overlay"> <span class="tag tag-pill tag-danger">News</span> </div>
<div class="card-block">
<div class="news-title">
<h2 class=" title-small"><a href="#">Syria war: Why the battle for Aleppo matters</a></h2>
</div>
<p class="card-text"><small class="text-time"><em>3 mins ago</em></small></p>
</div>
</div>
</div>
<div class="col-md-2 col-sm-6">
<div class="card"> <img class="img-fluid" src="http://grafreez.com/wp-content/temp_demos/river/img/media-1.jpg" alt="">
<div class="card-img-overlay"> <span class="tag tag-pill tag-danger">News</span> </div>
<div class="card-block">
<div class="news-title">
<h2 class=" title-small"><a href="#">Syria war: Why the battle for Aleppo matters</a></h2>
</div>
<p class="card-text"><small class="text-time"><em>3 mins ago</em></small></p>
</div>
</div>
</div>
<div class="col-md-2 col-sm-6">
<div class="card"> <img class="img-fluid" src="http://grafreez.com/wp-content/temp_demos/river/img/media-1.jpg" alt="">
<div class="card-img-overlay"> <span class="tag tag-pill tag-danger">News</span> </div>
<div class="card-block">
<div class="news-title">
<h2 class=" title-small"><a href="#">Syria war: Why the battle for Aleppo matters</a></h2>
</div>
<p class="card-text"><small class="text-time"><em>3 mins ago</em></small></p>
</div>
</div>
</div>
<div class="col-md-2 col-sm-6">
<div class="card"> <img class="img-fluid" src="http://grafreez.com/wp-content/temp_demos/river/img/media-1.jpg" alt="">
<div class="card-img-overlay"> <span class="tag tag-pill tag-danger">News</span> </div>
<div class="card-block">
<div class="news-title">
<h2 class=" title-small"><a href="#">Syria war: Why the battle for Aleppo matters</a></h2>
</div>
<p class="card-text"><small class="text-time"><em>3 mins ago</em></small></p>
</div>
</div>
</div>
<div class="col-md-2 col-sm-6">
<div class="card"> <img class="img-fluid" src="http://grafreez.com/wp-content/temp_demos/river/img/media-1.jpg" alt="">
<div class="card-img-overlay"> <span class="tag tag-pill tag-danger">News</span> </div>
<div class="card-block">
<div class="news-title">
<h2 class=" title-small"><a href="#">Syria war: Why the battle for Aleppo matters</a></h2>
</div>
<p class="card-text"><small class="text-time"><em>3 mins ago</em></small></p>
</div>
</div>
</div>
</div>
</div>
<div class="item">
<div class="row">
<div class="col-md-2 col-sm-6">
<div class="card"> <img class="img-fluid" src="http://grafreez.com/wp-content/temp_demos/river/img/media-1.jpg" alt="">
<div class="card-img-overlay"> <span class="tag tag-pill tag-danger">News</span> </div>
<div class="card-block">
<div class="news-title">
<h2 class=" title-small"><a href="#">Syria war: Why the battle for Aleppo matters</a></h2>
</div>
<p class="card-text"><small class="text-time"><em>3 mins ago</em></small></p>
</div>
</div>
</div>
<div class="col-md-2 col-sm-6">
<div class="card"> <img class="img-fluid" src="http://grafreez.com/wp-content/temp_demos/river/img/media-1.jpg" alt="">
<div class="card-img-overlay"> <span class="tag tag-pill tag-danger">News</span> </div>
<div class="card-block">
<div class="news-title">
<h2 class=" title-small"><a href="#">Syria war: Why the battle for Aleppo matters</a></h2>
</div>
<p class="card-text"><small class="text-time"><em>3 mins ago</em></small></p>
</div>
</div>
</div>
<div class="col-md-2 col-sm-6">
<div class="card"> <img class="img-fluid" src="http://grafreez.com/wp-content/temp_demos/river/img/media-1.jpg" alt="">
<div class="card-img-overlay"> <span class="tag tag-pill tag-danger">News</span> </div>
<div class="card-block">
<div class="news-title">
<h2 class=" title-small"><a href="#">Syria war: Why the battle for Aleppo matters</a></h2>
</div>
<p class="card-text"><small class="text-time"><em>3 mins ago</em></small></p>
</div>
</div>
</div> <div class="col-md-2 col-sm-6">
<div class="card"> <img class="img-fluid" src="http://grafreez.com/wp-content/temp_demos/river/img/media-1.jpg" alt="">
<div class="card-img-overlay"> <span class="tag tag-pill tag-danger">News</span> </div>
<div class="card-block">
<div class="news-title">
<h2 class=" title-small"><a href="#">Syria war: Why the battle for Aleppo matters</a></h2>
</div>
<p class="card-text"><small class="text-time"><em>3 mins ago</em></small></p>
</div>
</div>
</div> <div class="col-md-2 col-sm-6">
<div class="card"> <img class="img-fluid" src="http://grafreez.com/wp-content/temp_demos/river/img/media-1.jpg" alt="">
<div class="card-img-overlay"> <span class="tag tag-pill tag-danger">News</span> </div>
<div class="card-block">
<div class="news-title">
<h2 class=" title-small"><a href="#">Syria war: Why the battle for Aleppo matters</a></h2>
</div>
<p class="card-text"><small class="text-time"><em>3 mins ago</em></small></p>
</div>
</div>
</div>
</div>
</div>
</div>
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
<span aria-hidden="true"><i class="fa fa-chevron-circle-left"></i>
</span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
<span aria-hidden="true"><i class="fa fa-chevron-circle-right"></i>
</span>
<span class="sr-only">Next</span>
</a>
</div>
</header>
</div>
.fa.fa-chevron-circle-right {
right: 0;
}
.fa.fa-chevron-circle-left {
left: 0;
}
.fa.fa-chevron-circle-right, .fa.fa-chevron-circle-left {
margin-bottom: 1px;
position: absolute;
top: -30px;
color:#FF7700;
}
.col-img-responsive02 span{
color:#fff;
}
.col-img-responsive02 {
display:none;
background: none repeat scroll 0 0 rgba(0, 0, 0, 0.6);
height: 100%;
position: absolute;
width: 100%;
}
.carousel-control{
width:5%;
}
.panel-body{
position:relative;
padding:0px;
}
.btn-primary {
background-color: #337ab7;
border-color: #2e6da4;
border-radius: 0;
bottom: -15px;
color: #fff;
position: relative;
width: 100%;
-webkit-box-shadow: 0px 4px 5px 0px rgba(0,0,0,0.38);
-moz-box-shadow: 0px 4px 5px 0px rgba(0,0,0,0.38);
box-shadow: 0px 4px 5px 0px rgba(0,0,0,0.38);
}
.btn-primary {
background-color: #ff7700;
border-color: #fff;
}
.panel-default{
-webkit-box-shadow: 0px 4px 5px 0px rgba(0,0,0,0.38);
-moz-box-shadow: 0px 4px 5px 0px rgba(0,0,0,0.38);
box-shadow: 0px 4px 5px 0px rgba(0,0,0,0.38);
border: medium none;
border-radius: 0;
}
.panel-heading{
padding:0px;
position:relative;
}
.panel-heading img{
width:100%;
}
.carousel-control.left {
background-image: none;
}
.carousel-control.right{
background-image: none;
}
.banner-sec .card {
margin-bottom: 20px;
}
.card {
float: left;
width: 100%;
}
.card {
position: relative;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
background-color: #fff;
border: 1px solid rgba(0, 0, 0, 0.125);
border-radius: 0.25rem;
}
*, *::before, *::after {
-webkit-box-sizing: inherit;
box-sizing: inherit;
}
.img-fluid {
max-width: 100%;
height: auto;
}
img {
vertical-align: middle;
border-style: none;
}
*, *::before, *::after {
-webkit-box-sizing: inherit;
box-sizing: inherit;
}
.banner-sec .card-img-overlay {
padding: 0;
top: 3px;
left: 7px;
height: 20%;
}
.card-img-overlay {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
padding: 1.25rem;
}
*, *::before, *::after {
-webkit-box-sizing: inherit;
box-sizing: inherit;
}
.card-block {
padding: 0 10px 10px;
}
.card-block {
-webkit-box-flex: 1;
-webkit-flex: 1 1 auto;
-ms-flex: 1 1 auto;
flex: 1 1 auto;
padding: 1.25rem;
}
.title-small {
color: #141517;
font-size: 16px;
font-weight: 400;
line-height: 23px;
margin: 6px 0 0;
}
h1, h2, h3, h4, h5 {
font-family: 'Montserrat', sans-serif;
}
.card-text:last-child {
margin-bottom: 0;
}
.card-text {
margin: 0;
}
.text-time {
color: #ff0000;
font-weight: 600;
}
small, .small {
font-size: 80%;
font-weight: normal;
}
$(document).ready(function(){
$('.carousel').carousel({
pause: true,
interval: false
});
});
$(document).ready(function(){
$(".col-md-3 ").mouseenter(function(){
$(this).find(".col-img-responsive02").show(200);
});
$("")
$(".col-md-3").mouseleave(function(){
$(this).find(".col-img-responsive02").hide();
});
});
