Product Animation with pure CSS

Utilities Bootstrap 5Free+ CSS+ JS

Product Animation with pure CSS — a free Bootstrap 5 utility snippet. Copy the HTML, CSS & JS and paste straight into your Bootstrap 5 project.

2.4k views22 downloads5 years ago

gosnippets.com/preview/product-animation-with-pure-css

Source Code

1<div id="page">
2  <div class="content">
3    <h2>Product Animation</h2> 
4    <div class="product-items">
5      <!-- start item -->
6      <div class="product-item">
7        <div class="item-wrap">
8          <img src="https://tympanus.net/Development/ScatteredPolaroidsGallery/img/11.jpg">
9          <div class="wrap-qtt">
10            <div class="wrap-qtt-field-qtt">
11              <input class="field-qtt" name="qtt" value="1" readonly=""/>
12            </div>
13            <div class="wrap-qtt-minus-plus">
14              <button class="btn-cart-qtt btn-plus"><i class="ion-plus-round"></i></button>
15              <button class="btn-cart-qtt btn-minus"><i class="ion-minus-round"></i></button>
16            </div>
17          </div>
18        </div>
19        <div class="item-info">
20          <div class="item-title">Product One</div>
21          <div class="item-price" data-price="45">$45</div>
22        </div>
23      </div>
24      <!-- end item -->
25      <div class="product-item">
26        <div class="item-wrap">
27          <img src="https://tympanus.net/Development/ScatteredPolaroidsGallery/img/12.jpg">
28          <div class="wrap-qtt">
29            <div class="wrap-qtt-field-qtt">
30              <input class="field-qtt" name="qtt" value="1" readonly=""/>
31            </div>
32            <div class="wrap-qtt-minus-plus">
33              <button class="btn-cart-qtt btn-plus"><i class="ion-plus-round"></i></button>
34              <button class="btn-cart-qtt btn-minus"><i class="ion-minus-round"></i></button>
35            </div>
36          </div>
37        </div>
38        <div class="item-info">
39          <div class="item-title">Product One</div>
40          <div class="item-price" data-price="35">$35</div>
41        </div>
42      </div>
43      <div class="product-item">
44        <div class="item-wrap">
45          <img src="https://tympanus.net/Development/ScatteredPolaroidsGallery/img/13.jpg">
46          <div class="wrap-qtt">
47            <div class="wrap-qtt-field-qtt">
48              <input class="field-qtt" name="qtt" value="1" readonly=""/>
49            </div>
50            <div class="wrap-qtt-minus-plus">
51              <button class="btn-cart-qtt btn-plus"><i class="ion-plus-round"></i></button>
52              <button class="btn-cart-qtt btn-minus"><i class="ion-minus-round"></i></button>
53            </div>
54          </div>
55        </div>
56        <div class="item-info">
57          <div class="item-title">Product One</div>
58          <div class="item-price" data-price="25">$25</div>
59        </div>
60      </div>
61    </div>
62  </div>
63</div>
64 <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>

More Utilities snippets

Auto move mouse cursor snippet

Auto move mouse cursor snippet: a hand-crafted, open-source Bootstrap 5 utility. HTML, CSS & JS included, ready to copy.

UtilitiesView →

Bootstrap 5 Ecommerce Product Detail Page Design snippet

Free Bootstrap 5 utility snippet — Bootstrap 5 Ecommerce Product Detail Page Design snippet. Preview, copy HTML & CSS, drop it into any Bootstrap 5 project.

UtilitiesView →

Bootstrap 5 Ecommerce single product page design template

Free Bootstrap 5 utility snippet — Bootstrap 5 Ecommerce single product page design template. Preview, copy HTML & CSS, drop it into any Bootstrap 5 project.

UtilitiesView →

Comments(0)

No comments yet — be the first to start the discussion.

1<div id="page"> 2 <div class="content"> 3 <h2>Product Animation</h2> 4 <div class="product-items"> 5  6 <div class="product-item"> 7 <div class="item-wrap"> 8 <img src="https://tympanus.net/Development/ScatteredPolaroidsGallery/img/11.jpg"> 9 <div class="wrap-qtt"> 10 <div class="wrap-qtt-field-qtt"> 11 <input class="field-qtt" name="qtt" value="1" readonly=""/> 12 </div> 13 <div class="wrap-qtt-minus-plus"> 14 <button class="btn-cart-qtt btn-plus"><i class="ion-plus-round"></i></button> 15 <button class="btn-cart-qtt btn-minus"><i class="ion-minus-round"></i></button> 16 </div> 17 </div> 18 </div> 19 <div class="item-info"> 20 <div class="item-title">Product One</div> 21 <div class="item-price" data-price="45">$45</div> 22 </div> 23 </div> 24  25 <div class="product-item"> 26 <div class="item-wrap"> 27 <img src="https://tympanus.net/Development/ScatteredPolaroidsGallery/img/12.jpg"> 28 <div class="wrap-qtt"> 29 <div class="wrap-qtt-field-qtt"> 30 <input class="field-qtt" name="qtt" value="1" readonly=""/> 31 </div> 32 <div class="wrap-qtt-minus-plus"> 33 <button class="btn-cart-qtt btn-plus"><i class="ion-plus-round"></i></button> 34 <button class="btn-cart-qtt btn-minus"><i class="ion-minus-round"></i></button> 35 </div> 36 </div> 37 </div> 38 <div class="item-info"> 39 <div class="item-title">Product One</div> 40 <div class="item-price" data-price="35">$35</div> 41 </div> 42 </div> 43 <div class="product-item"> 44 <div class="item-wrap"> 45 <img src="https://tympanus.net/Development/ScatteredPolaroidsGallery/img/13.jpg"> 46 <div class="wrap-qtt"> 47 <div class="wrap-qtt-field-qtt"> 48 <input class="field-qtt" name="qtt" value="1" readonly=""/> 49 </div> 50 <div class="wrap-qtt-minus-plus"> 51 <button class="btn-cart-qtt btn-plus"><i class="ion-plus-round"></i></button> 52 <button class="btn-cart-qtt btn-minus"><i class="ion-minus-round"></i></button> 53 </div> 54 </div> 55 </div> 56 <div class="item-info"> 57 <div class="item-title">Product One</div> 58 <div class="item-price" data-price="25">$25</div> 59 </div> 60 </div> 61 </div> 62 </div> 63</div> 64 <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>