Bootstrap Snippet Home Page Grid View with CSS Effects using HTML CSS

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="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.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="container">
    <div class="main">
        <div class="box">
            <img src="http://wallpaperlatest.com/wp-content/uploads/1920x1080-stars-wallpapers-free-download.jpg" />
                <div class="overlay">
                </div>
            <a class="more" href="#name">Read more </a>
            
            
        </div>
        
        <div class="box">
            <img src="http://wallpaperlatest.com/wp-content/uploads/desktop-wallpapers-download-free-hd.jpg" />
                <div class="overlay">
                </div>
            <a href="#">Read more </a>
        </div>
        
        <div class="box">
            <img src="http://wallpaperlatest.com/wp-content/uploads/download-mountain-wallpaper-hd-quality.jpg" />
                <div class="overlay">
                </div>
            <a href="#">Read more </a>
        </div>
        
        <div class="box">
            <img src="http://wallpaperlatest.com/wp-content/uploads/download-wallpapers-for-android.jpg" />
                <div class="overlay">
                </div>
            <a href="#">Read more </a>
        </div>
        
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
.box{width:200px; height:230px; border:2px solid #000; border-radius:2px; float:left; margin:20px 30px;  }
.box img{width:300px; height:250px;}
.box .overlay{width:300px; height:250px; background:#fff; margin:-250px 0px 0px 0px; opacity:0.5; }
.box a{padding:5px 7px; border:1px solid #000; text-decoration:none; font-family:sans-serif; font-size:14px; margin:-140px 0px 0px 15px; display:inline-block; opacity:0; transition:all 0.5s ease-in-out;    cursor: pointer;/* z-index: 10000; */position: absolute;}
.box .overlay:hover{opacity:0.1; transition:all 0.5s ease-in-out; width:300px; margin-left:50px; float:right; }
.box:hover{box-shadow:0px 0px 10px #6A6A6A; border:1px solid #00DFDF;transition:all 0.5s ease-in-out;}
.box:hover a{opacity:1; background:#FFFFFF; color:#000000; margin:-40px 0px 0px 15px;  border-radius:1px; }
.box a:hover{border:2px solid #66DFDF;transition:all 0.5s ease-in-out;   }
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Home Page Grid View with CSS Effects"
Bootstrap 3.0.0 Snippet by roshanfbraju

Related: See More

Questions / Comments:

"Home Page Grid View with CSS Effects" Bootstrap 3.0.0 Snippet by roshanfbraju

Related: See More

Questions / Comments:

"Home Page Grid View with CSS Effects"
Bootstrap 3.0.0 Snippet by roshanfbraju