Bootstrap Snippet Product Hover Effect using HTML CSS Bootstrap

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="//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 ---------->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="container">
    <div class="row">
        <div class="jumbotron text-center">
            <h1>Product Hover Effect</h1> 
    
          </div>
    
        <div class="col-md-6">
            <!-- .pro-text -->
            <div class="pro-text">
                <!-- .pro-img -->
                <div class="pro-img"> 
                    <img src="http://demo.zavana.net/outstock/outstock/assets/images/Products/5.jpg" alt="2" class='img-responsive'>
                    <!-- .hover-img -->
                    <div class="hover-img">
                        <ul>
                            <li><a href="#"><i class="fa fa-heart-o" aria-hidden="true"></i></a></li>
                            <li><a href="#"><i class="fa fa-sliders" aria-hidden="true"></i></a></li>
                            <li><a href="#" data-toggle="modal" data-target="#quickModal" data-whatever="@mdo"><i class="fa fa-search" aria-hidden="true"></i></a></li>
                        </ul>
                    </div>
                    <div class="new tage"> <span class="new-text">NEW</span> <span class="pres-text">-15%</span> </div>
                    <!-- /.hover-img -->
                </div>
                <!-- /.pro-img --><a href="#">Wooden container Bowl</a> <a href="#" class="addtocart">+ Add to cart</a>
                <div class="price">$160.00</div>
            </div>
            <!-- /.pro-text -->
        </div>
        <div class="col-md-6">
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
.pro-text {
    float: left;
    overflow: hidden;
    width: 100%;
    margin-bottom: 30px;
}
.pro-img {
    margin-bottom: 10px;
    position: relative;
}
.hover-img {
    z-index: 999;
}
.hover-img {
    background: rgba(0, 0, 0,0.15) none repeat scroll 0 0;
    bottom: 0px;
    opacity: 0;
    position: absolute;
    right: 15px;
    text-align: center;
    transition: all 0.5s ease 0s;
}
.hover-img>ul {
    list-style: outside none none;
    padding: 10px 10px 0;
}
.hover-img li {
    border-bottom: 1px solid rgb(235, 235, 235);
    margin-bottom: 5px;
    padding-bottom: 5px;
    padding-left: 5px;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Product Hover Effect"
Bootstrap 3.3.0 Snippet by AminulDev

Related: See More

Questions / Comments:

"Product Hover Effect" Bootstrap 3.3.0 Snippet by AminulDev

Related: See More

Questions / Comments:

"Product Hover Effect"
Bootstrap 3.3.0 Snippet by AminulDev