Bootstrap Snippet Bootstrap 4 Big Grid With Hover Effect using HTML CSS Bootstrap

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<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">
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
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%);
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

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

Related: See More

Questions / Comments:

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

Related: See More

Questions / Comments:

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