There are two variations of shop products.
Default Product
Variaton class:
- ct-productShop–default
Default shop product
HTML markup:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<div class="ct-productShop ct-productShop--default"> <div class="ct-productShop-category"> <span class="ct-productShop-h5">Earrings</span> <div class="clearfix"></div> <img class="" src="./assets/images/demo-content/latest-item1.jpg" data-zoom-image="assets/images/demo-content/latest-item1-large.jpg" alt=""> </div> <div class="ct-productShop-content"> <div class="ct-productShop-content-description"> <a href="single-product.html"> <h3>Leslie Greene 18K Whiting Gold Square Aria Drop Earrings</h3> <span>$255.00</span> </a> <span class="ct-productShop-shopCart"> <a class="btn btn-default" href="#" role="button"><i class="fa fa-shopping-cart fa-fw"></i></a> <a class="btn btn-default btn-hidden" href="#" role="button"><i class="fa fa-chain fa-fw"></i></a> </span> </div> </div> </div> |
Shop product with zoom effect
Variation class:
- ct-productShop–zoom
Shop product with zoom
HTML markup:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<div class="ct-productShop ct-productShop--zoom"> <div class="ct-productShop-category"> <span class="ct-productShop-h5">Rings</span> <div class="clearfix"></div> <img class="ct-js-zoomImage" src="./assets/images/demo-content/featured-item1.jpg" data-zoom-image="assets/images/demo-content/featured-item1-large.jpg" alt=""> </div> <div class="ct-productShop-content"> <div class="ct-productShop-content-description"> <a href="single-product.html"> <h3>Aaron basha 18K White Yellows Pink Enamel Flower</h3> <span><del>450.99</del> $318.00</span> </a> <span class="ct-productShop-shopCart"> <a class="btn btn-default" href="#" role="button"><i class="fa fa-shopping-cart fa-fw"></i></a> <a class="btn btn-default btn-hidden" href="#" role="button"><i class="fa fa-chain fa-fw"></i></a> </span> </div> </div> </div> |
These effects are used in sliders as well.
Javasript needed for Zoom Effect on images:
Learn more:
Zoom effect docs:
www.elevateweb.co.uk/image-zoom