Bootstrap Snippet Ecommerce Products Display Layout using HTML CSS Bootstrap jQuery

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 ---------->
<div class="container">
    <div class="row">
        <h2>Ecommerce Products Display Layout</h2>
        <p>
            This snippent uses <a href="http://daneden.github.io/animate.css/" target="_blank">Animate.css</a> for the animation of the buttons.
        </p>
        <div class="col-sm-3">
            <article class="col-item">
                <div class="photo">
                    <div class="options-cart-round">
                        <button class="btn btn-default" title="Add to cart">
                            <span class="fa fa-shopping-cart"></span>
                        </button>
                    </div>
                    <a href="#"> <img src="https://unsplash.it/500/300?image=0" class="img-responsive" alt="Product Image" /> </a>
                </div>
                <div class="info">
                    <div class="row">
                        <div class="price-details col-md-6">
                            <p class="details">
                                Lorem ipsum dolor sit amet, consectetur..
                            </p>
                            <h1>Sample Product</h1>
                            <span class="price-new">$110.00</span>
                        </div>
                    </div>
                </div>
            </article>
            <p class="text-center">Hover over image</p>
        </div>
        <div class="col-sm-3">
            <article class="col-item">
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
/* font Awesome http://fontawesome.io*/
@import url(//maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css);
/* Animation.css*/
@import url(https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css);
.col-item {
  border: 1px solid #E1E1E1;
  background: #FFF;
  margin-bottom:12px;
}
.col-item .options {
  position:absolute;
  top:6px;
  right:22px;
}
.col-item .photo {
  overflow: hidden;
}
.col-item .photo .options {
  display:none;
}
.col-item .photo img {
  margin: 0 auto;
  width: 100%;
}
.col-item .options-cart {
  position:absolute;
  left:22px;
  top:6px;
  display:none;
}
.col-item .photo:hover .options,
.col-item .photo:hover .options-cart {
  display:block;
  -webkit-animation: fadeIn .5s ease;
  -moz-animation: fadeIn .5s ease;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
/*Tooltip*/
$(function () {
  $('[data-toggle="tooltip"]').tooltip();
});
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Ecommerce Products Display Layout"
Bootstrap 3.3.0 Snippet by andrewnite

Related: See More

Questions / Comments:

"Ecommerce Products Display Layout" Bootstrap 3.3.0 Snippet by andrewnite

Related: See More

Questions / Comments:

"Ecommerce Products Display Layout"
Bootstrap 3.3.0 Snippet by andrewnite