<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 ---------->
<!DOCtype html>
<html>
<title> stabbed </title>
<link href="assets/css/bootstrap.css" rel="stylesheet">
<link href="assets/css/style.css" rel="stylesheet">
<body>
<div class="container">
<div class="big-grid-1 clearfix">
<button class="posts-category">Latest Posts</button>
<div class="col-md-6 relative big-grid">
<div class="grid-inner">
<a href="#">
<img src="https://foreigncodes.com/wp-content/uploads/2017/10/photo-1.png" class="img-responsive">
<div class="big-grid-overlay layed">
<button class="grid-2-category"> Technolgy </button>
<h3>if you are in love with shades, this is a thousand pair</h3>
<div class="grid-post-meta">
<span class="grid-2-author-name"><b>Neon Emmanuel - </b></span> <span class="grid_2-post-date"> Aug 2, 2017</span>
</div>
</div>
</a>
</div>
</div>
<!-- First big Grid-->
<div class="col-md-6 relative medium-grid">
<div class="col-xs-12 medium-grid">
<div class="grid-inner">
<a href="#">
<img src="https://foreigncodes.com/wp-content/uploads/2017/10/photo-2.png" class="img-responsive">
<div class="big-grid-overlay layed">
<button class="grid-2-category hidden-xs hidden-sm"> Technolgy </button>
<h3>if you are in love with shades, this is a thousand pair</h3>
</div>
</a>
</div>
</div>
<!-- Seound big Grid-->
<div class="col-xs-12 small-grid-group">
<div class="col-xs-6 relative small-grid mobile-padded">
<div class="grid-inner">
<a href="#">
<img src="https://foreigncodes.com/wp-content/uploads/2017/10/photo-3.png" class="img-responsive">
<div class="big-grid-overlay layed">
<button class="grid-2-category hidden-xs hidden-sm"> Technolgy </button>
<h3>if you are in love with shades, this is a thousand pair</h3>
</div>
</a>
</div>
</div>
<!-- Seound big Grid-->
<div class="col-xs-6 relative small-grid mobile-padded">
<div class="grid-inner">
<a href="#">
<img src="https://foreigncodes.com/wp-content/uploads/2017/10/photo-3.png" class="img-responsive">
<div class="big-grid-overlay layed">
<button class="grid-2-category hidden-xs hidden-sm"> Technolgy </button>
<h3>if you are in love with shades, this is a thousand pair</h3>
</div>
</a>
</div>
</div>
<!-- Seound big Grid-->
</div>
</div>
</div>
</div>
<script src="assets/js/googlejq.js"></script>
<script src="assets/js/bootstrap.js"></script>
</body>
</html>
body{
padding: 50px 0px;
margin: 0px;
}
.relative {
position: relative;
}
.layed {
position: absolute;
bottom: 0;
}
.big-grid-overlay.layed {
padding: 10px;
position: absolute;
bottom: 0px;
width: 100%;
z-index: 1;
color: white;
}
.big-grid-1.clearfix {
position: relative;
}
.col-md-6.relative a::before {
content: " ";
position: absolute;
height: 100%;
width: 100%;
z-index: 1;
background: -moz-linear-gradient(top, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, 0.7) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(40%, rgba(0, 0, 0, 0)), color-stop(100%, rgba(0, 0, 0, 0.7)));
background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, 0.7) 100%);
background: -o-linear-gradient(top, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, 0.7) 100%);
background: -ms-linear-gradient(top, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, 0.7) 100%);
background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, 0.7) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#b3000000', GradientType=0);
}
.grid-inner {
overflow: hidden !important;
display: block;
position: relative;
}
.grid-inner img{
-webkit-transition: opacity 1s, -webkit-transform 1s;
transition: opacity 1s, transform 1s;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
max-width: none;
width: 100%;
}
.col-md-6.relative a:hover img{
opacity: 0.9;
-webkit-transform: scale3d(1.1,1.1,1);
transform: scale3d(1.1,1.1,1);
}
.col-xs-12.small-grid-group {
padding: 0px;
}
.col-md-6.relative.medium-grid, .col-md-6.relative.big-grid {
padding: 0px;
}
.big-grid-overlay h3 , .grid-2-category, .posts-category{
font-family: poppins;
font-weight: 700;
text-transform: capitalize;
color: #fff;
}
.grid-post-meta{
font-family: poppins;
}
.grid-2-category, .posts-category {
background: #16a085;
border: 0px;
border-radius: 3px;
text-transform: uppercase;
font-size: 10px;
padding: 1px 4px;
}
.posts-category {
position: absolute;
left: 30px;
z-index: 9999;
top: 30px;
}
.col-xs-12.medium-grid {
padding-top: 10px;
}
.col-xs-12.medium-grid {
padding: 10px 0px 0px 0px;
}
.col-xs-12.small-grid-group {
padding: 10px 0px 0px 0px;
}
.col-xs-6.relative.small-grid {
padding: 0px;
}
.col-xs-12.medium-grid h3{
font-size: 13px;
}
.col-xs-6.relative.small-grid h3 {
font-size: 10px;
}
.col-xs-6.relative.small-grid.mobile-padded {
padding: 0px 5px 0px 0px;
}
.col-xs-6.relative.small-grid.mobile-padded:last-of-type {
padding-right: 3px !important;
}
/*Media Queries */
@media only screen and (min-width: 768px){
.big-grid-overlay.layed{
padding: 20px;
}
.big-grid-overlay.layed {
padding: 50px 60px;
}
.col-xs-6.relative.small-grid h3 {
font-size: 20px;
}
.col-xs-12.medium-grid h3 {
font-size: 24px;
}
}
@media only screen and (min-width: 1000px){
.col-xs-12.medium-grid {
padding: 0px 0px 5px 5px;
}
.col-xs-12.small-grid-group{
padding: 0px 0px 0px 5px;
}
.col-xs-12.small-grid-group img {
height: 200px;
}
.col-xs-12.medium-grid img {
height: 205px;
}
.big-grid-overlay.layed {
padding: 30px 30px;
}
.col-xs-6.relative.small-grid.mobile-padded:last-of-type {
padding-right: 0px !important;
}
.col-md-6.relative.big-grid img {
height: 410px;
}
}
