"Bootstrap 4 Big Grid With Hover Effect"
Bootstrap 3.3.0 Snippet by neon

<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; } }

Related: See More


Questions / Comments: