"Caption hover effect text"
Bootstrap 3.1.0 Snippet by joseanmola

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.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.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="row">
<h2>Caption hover effect </h2>
<p>Image caption with a text previewed in the bottom</p>
<p>Width size doesn´t matter</p>
</div>
<div class="row">
<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://trovacamporella.com/img/trovacamporella-fiat500.png" 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="http://trovacamporella.com"><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">
<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>
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:

hey i want image hover button when click on button image visiblity hidden and show content

Muhammad Kashif () - 8 years ago - Reply 0


styles shouldn't be inside the HTML-file. This is a no-go.

Der Volksfreund () - 8 years ago - Reply 0


It's working fine in my PC- http://prntscr.com/9r2mxk

Mofizul Islam () - 9 years ago - Reply 0


it works only here in bootsnipp ... but if you integrate the snippet in your own code the problem came from the css itself.

Kawazaky () - 10 years ago - Reply 0


It's a shame it doesn't work properly on mobile devices...

AGS () - 10 years ago - Reply 0


thank you its good

fateme () - 10 years ago - Reply 0