<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 ---------->
<div class="container">
<div class="row">
<div class="imgbox"><a href="#"><div id="cat1" class="catimage" ><label id="lblcat1" class="catlablel">Organically caltivated vegetables.</label></div></a></div>
<div class="imgbox"><a href="#"><div id="cat2" class="catimage" ><label id="lblcat2" class="catlablel">Organically caltivated leafy vegetables.</label></div></a></div>
<div class="imgbox"><a href="#"><div id="cat3" class="catimage" ><label id="lblcat3" class="catlablel">Organically caltivated grams.</label></div></a></div>
</div>
<div class="row">
<div class="imgbox"><a href="view.php"><div id="cat4" class="catimage" ><label id="lblcat4" class="catlablel">Country eggs and organically produced corn fed broiler chickens.</label></div></a></div>
<div class="imgbox"><a href="view.php"><div id="cat5" class="catimage" ><label id="lblcat5" class="catlablel">Organically caltivated yams.</label></div></a></div>
</div>
</div>
.imgbox{
width:260px;
height:260px;
float:left;
padding:6px;
margin:30px 0 30px 40px;
border-radius:10px;
background-color:#056bce;
transition:background-color 0.25s linear 0;
-webkit-transition:background-color 0.25s linear 0;
-o-transition:background-color 0.25s linear 0;
-ms-transition:background-color 0.25s linear 0;
-moz-transition:background-color 0.25s linear 0;
}
.imgbox a{
text-decoration:none;
}
.imgbox:hover{
background-color:#babbbb;
transition:background-color 0.25s linear 0;
-webkit-transition:background-color 0.25s linear 0;
-o-transition:background-color 0.25s linear 0;
-ms-transition:background-color 0.25s linear 0;
-moz-transition:background-color 0.25s linear 0;
box-shadow:0 0 20px #000;
-webkit-box-shadow:0 0 20px #000;
-moz-box-shadow:0 0 20px #000;
-o-box-shadow:0 0 20px #000;
-ms-box-shadow:0 0 20px #000;
}
.imgbox:hover .catimage{
border-color:#056bce;
transition:border-color 0.25s linear 0;
-webkit-transition:border-color 0.25s linear 0;
-moz-transition:border-color 0.25s linear 0;
-o-transition:border-color 0.25s linear 0;
-ms-transition:border-color 0.25s linear 0;
}
.imgbox .catimage{
width:250px;
height:250px;
border:solid 5px #babbbb;
border-radius:10px;
overflow:hidden;
transition:border-color 0.25s linear 0;
-webkit-transition:border-color 0.25s linear 0;
-moz-transition:border-color 0.25s linear 0;
-o-transition:border-color 0.25s linear 0;
-ms-transition:border-color 0.25s linear 0;
}
.catlablel{
text-align:center;
font-size:20px;
color:green;
margin-top:250px;
}
#cat1{
background:url(https://farm4.staticflickr.com/3850/33718876161_4ee56d284f_n.jpg);background-position:0 0;transition:all 0.5s ease-in 0;
}
#cat2{
background:url(https://farm4.staticflickr.com/3871/33463688380_6746e857e1_n.jpg);background-position:0 0;transition:all 0.5s ease-in 0;
}
#cat3{
background:url(https://farm3.staticflickr.com/2915/33848141965_2790480986_n.jpg);background-position:0 0;transition:all 0.5s ease-in 0;
}
#cat4{
background:url(https://farm3.staticflickr.com/2820/33004724874_611413bc16_n.jpg);background-position:0 0;transition:all 0.5s ease-in 0;
}
#cat5{
background:url(https://farm3.staticflickr.com/2807/33004725444_8830137aa8_n.jpg);background-position:0 0;transition:all 0.5s ease-in 0;
}
$(document).ready(function(){
// slideupCat function for slide up the categories when hover
function slideupCat($cat,$label){
$('#'+$cat).mouseover(function(){
$(this).css('background-position','0 -70px').css('transition','all 0.5s ease-in').css('-webkit-transition','all 0.5s ease-in').css('-moz-transition','all 0.5s ease-in').css('-o-transition','all 0.5s ease-in').css('-ms-transition','all 0.5s ease-in');
$('#'+$label).css('margin-top','180px').css('transition','all 0.5s ease-in').css('-webkit-transition','all 0.5s ease-in').css('-moz-transition','all 0.5s ease-in').css('-o-transition','all 0.5s ease-in').css('-ms-transition','all 0.5s ease-in');
});
$('#'+$cat).mouseout(function(){
$(this).css('background-position','0 0').css('transition','all 0.5s ease-in').css('-webkit-transition','all 0.5s ease-in').css('-moz-transition','all 0.5s ease-in').css('-o-transition','all 0.5s ease-in').css('-ms-transition','all 0.5s ease-in');
$('#'+$label).css('margin-top','250px').css('transition','all 0.5s ease-in').css('-webkit-transition','all 0.5s ease-in').css('-moz-transition','all 0.5s ease-in').css('-o-transition','all 0.5s ease-in').css('-ms-transition','all 0.5s ease-in');
});
}
slideupCat('cat1','lblcat1');
slideupCat('cat2','lblcat2');
slideupCat('cat3','lblcat3');
slideupCat('cat4','lblcat4');
slideupCat('cat5','lblcat5');
});
