"Blog footer"
Bootstrap 3.2.0 Snippet by andras2001

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.2.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.2.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 href="//netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
<hr>
<footer>
<div class="row">
<div class="col-lg-12">
<div class="col-lg-3 col-md-6">
<div class="container">
<div class="col-lg-3">
<div class="cuadro_intro_hover " style="background-color:#cccccc;">
<p style="text-align:center; margin-top:20px;">
<img src="http://placehold.it/500x330" class="img-responsive" alt="">
</p>
<div class="caption">
<div class="blur"></div>
<div class="caption-text">
<h3 style="border-top:2px solid white; border-bottom:2px solid white; padding:10px;">THIS IS H3</h3>
<p>Loren ipsum dolor si amet ipsum dolor si amet ipsum dolor...</p>
<a class=" btn btn-default" href="#"><span class="glyphicon glyphicon-plus"> INFO</span></a>
</div>
</div>
</div>
</div>
<div class="col-lg-3">
<div class="cuadro_intro_hover " style="background-color:#cccccc;">
<p style="text-align:center; margin-top:20px;">
<img src="http://placehold.it/500x330" class="img-responsive" alt="">
</p>
<div class="caption">
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
.cuadro_intro_hover{
padding: 0px;
position: relative;
overflow: hidden;
height: 200px;
}
.cuadro_intro_hover:hover .caption{
opacity: 1;
transform: translateY(-150px);
-webkit-transform:translateY(-150px);
-moz-transform:translateY(-150px);
-ms-transform:translateY(-150px);
-o-transform:translateY(-150px);
}
.cuadro_intro_hover img{
z-index: 4;
}
.cuadro_intro_hover .caption{
position: absolute;
top:150px;
-webkit-transition:all 0.3s ease-in-out;
-moz-transition:all 0.3s ease-in-out;
-o-transition:all 0.3s ease-in-out;
-ms-transition:all 0.3s ease-in-out;
transition:all 0.3s ease-in-out;
width: 100%;
}
.cuadro_intro_hover .blur{
background-color: rgba(0,0,0,0.7);
height: 300px;
z-index: 5;
position: absolute;
width: 100%;
}
.cuadro_intro_hover .caption-text{
z-index: 10;
color: #fff;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More


Questions / Comments:

Well! Thanks for great points <a href="https://www.brandsrope.com/collections/home-lifestyle">bedsheets brand in pakistan</a>

waqasali123 () - 1 year ago - Reply 0


Well! Thanks for great points. <a href="https://www.brandsrope.com/collections/home-lifestyle">bedsheets brand in pakistan</a>

waqasali123 () - 1 year ago - Reply 0


Not good. Wrong col-class declaration and styles in the HTML file (*omg* this is 1999)

Der Volksfreund () - 8 years ago - Reply 0


thaks for this nice project

Juan Camilo () - 9 years ago - Reply 0


What would be awesome if the author can provide us with his native language so that we can translate his comments and be able to modify the variables!

Even better would be that the admin of this site not allow other languages on the snippets !

Charles Harris () - 9 years ago - Reply 0


nice!

[CorVayne] #TeamExitoso () - 9 years ago - Reply 0