Bootstrap Snippet Shopping Cart Item Hover using HTML CSS jQuery

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<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>
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
.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;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
$(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');
});
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Shopping Cart Item Hover"
Bootstrap 3.3.0 Snippet by spuvi86

Related: See More

Questions / Comments:

"Shopping Cart Item Hover" Bootstrap 3.3.0 Snippet by spuvi86

Related: See More

Questions / Comments:

"Shopping Cart Item Hover"
Bootstrap 3.3.0 Snippet by spuvi86