"Shopping Cart Item Hover"
Bootstrap 3.3.0 Snippet by codesoftlab

<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'); });

Related: See More


Questions / Comments: