<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 ---------->
<section class="our-word">
<div class="container">
<div class="row">
<div class="work-heading">
<h1> client Textimonial</h1>
</div>
<div class="col-xs-12 col-sm-3 gal_img">
<div class="thumbnail">
<div class="caption" style="display: none;">
<p>Siuntinukas.lt tai paprastas būdas pervežti krovinius</p>
</div>
<img alt="..." src="images/man.jpg">
</div>
</div>
<div class="col-xs-12 col-sm-3 gal_img">
<div class="thumbnail">
<div class="caption" style="display: none;">
<p>Esu vairuotojas, man svarbu gauti užsakymus, kai esu kelyje, todėl galiu planuoti savo maršrutą ir maksimaliai išnaudoti kelionės laiką. Tikrai paprastas įrankis, nes klientas gali apmokėti tiek kortele tiek banko pavedimu. Super</p>
</div>
<img alt="..." src="images/man2.jpg">
</div>
</div>
<div class="col-xs-12 col-sm-3 gal_img">
<div class="thumbnail">
<div class="caption" style="display: none;">
<p>Užsisakyti kurierį buvo tikrai lengvas procesas, paskelbi užduoti, paluki pasiūlymų, išsirenki patį geriausią, susimoki, viskas. Nusiunčiau siuntinio numerį klientui ir jis galėjo matyti kur jo siuntinys yra. </p>
</div>
<img alt="..." src="images/man3.jpg">
</div>
</div>
<div class="col-xs-12 col-sm-3 gal_img">
<div class="thumbnail">
<div class="caption" style="display: none;">
<p>The Siuntinukas gives me the availability to do what I want to do and still be able to maintain my deliveries.</p>
</div>
<img alt="..." src="images/man4.jpg">
</div>
</div>
</div>
</div>
</section>
.our-word {
background: rgba(0, 0, 0, 0) url("../img/hero.jpg") no-repeat scroll 0 0 / 100% auto;
border-top: 1px dashed rgba(102, 102, 102, 0.5);
float: left;
height: auto;
overflow: hidden;
padding: 40px 0;
width: 100%;
}
.work-heading, .work-content {
float: left;
width: 100%;
}
.our-word .thumbnail {
background-color: #f79602;
border: 1px solid #f58d03;
border-radius: 0;
height: 191px;
line-height: 1.42857;
margin: 3px !important;
padding: 1px;
}
.caption {
background: rgba(253, 184, 21, 0.7) none repeat scroll 0 0;
color: #fff !important;
display: none;
height: 187px;
padding: 2%;
position: absolute;
text-align: left;
top: 5px;
width: 87%;
z-index: 2;
}
.caption p {
align-items: center;
cursor: pointer;
display: flex;
font-family: lato;
font-size: 14px;
height: 100%;
line-height: normal;
position: relative;
vertical-align: middle;
}
.html body section.our-word div.container div.row div.col-sm-3.gal_img div img {
height: 100%;
width: 100%;
}
.thumbnail .caption {
color: rgb(51, 51, 51);
padding: 10px;
text-align: center;
vertical-align: middle;
}
.work-heading h1 {
color: rgb(247, 150, 2);
font-family: lato;
font-size: 30px;
font-weight: 300;
margin: 0;
padding: 0 0 40px;
text-align: center;
text-shadow: 0 1px 0 rgba(0, 0, 0, 0.6);
text-transform: uppercase;
}
<script type="text/javascript">
$("[rel='tooltip']").tooltip();
$('.thumbnail').hover(
function(){
$(this).find('.caption').slideDown(250); //.fadeIn(250)
},
function(){
$(this).find('.caption').slideUp(250); //.fadeOut(205)
}
);
</script>
