HTML markup
|
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 |
<article class="ct-isotope-item isotope-grid-sizer ct-product people"> <div class="ct-isotope-item__inner"> <figure class="ct-isotope-item__media ct-product_media"><a href="image_single.html"><img src="assets/images/content/image64.jpg" alt="Jakob_Night1"/></a></figure> <div class="ct-isotope-item__hover"> <div class="ct-shop-item__text"> <p>Girl sitting on the floor and looking forwards. </p> </div> <div class="ct-shop-item__buttons"> <div> <a href="#01" class="popup-modal btn btn btn-lg btn-motive btn-rounded">Image Details</a> <div id="01" class="white-popup-block mfp-hide"> <div class="ct-shop-popup"> <div class="ct-shop-popup__body"> <h4 class="ct-shop-popup__header">Jakob_Night1</h4><a class="popup-close" href="#"><i class="fa fa-times"></i></a> <figure><img src="assets/images/content/image64.jpg" alt="Jakob_Night1"/></figure> <div class="ct-shop-popup__text"> <p>Girld in leather jacket stands in the garden thinking of yellow sub-marine and pizzas.</p> </div> <div class="text-center"> <button class="btn btn btn-lg btn-motive btn-rounded ct-product-button-f"><i class="fa fa-shopping-cart"></i> Buy Now </button> </div> </div> <div class="ct-shop-popup__footer"> <div class="ct-shop-item__tags"><a href="#" target="_blank">girl,</a><a href="#" target="_blank">looking,</a><a href="#" target="_blank">face,</a><a href="#" target="_blank">blonde,</a><a href="#" target="_blank">pretty,</a><a href="#" target="_blank">sitting,</a><a href="#" target="_blank">nice,</a><a href="#" target="_blank">beautiful </a></div> </div> </div> </div> </div> <div> <button class="btn btn btn-lg btn-motive btn-rounded ct-product-button"><i class="fa fa-shopping-cart"></i> Buy Now </button> </div> </div> <div class="ct-shop-item__tags"><a href="#" target="_blank">girl,</a><a href="#" target="_blank">looking,</a><a href="#" target="_blank">face,</a><a href="#" target="_blank">blonde,</a><a href="#" target="_blank">pretty,</a><a href="#" target="_blank">sitting,</a><a href="#" target="_blank">nice,</a><a href="#" target="_blank">beautiful </a></div> <div class="ct-isotope-item__content"><a href="image_single.html" class="ct-isotope-item__name">Jakob_Night1</a><span class="ct-product-price">$50.00 </span><a href="#" class="ct-isotope-item__likes"><i class="fa fa-heart"></i>25 </a></div> </div> <div class="ct-isotope-item__content"><a href="image_single.html" class="ct-isotope-item__name ct-product-title">Jakob_Night1</a><span class="ct-product-price_f">$50.00 </span><a href="#" class="ct-isotope-item__likes"><i class="fa fa-heart"></i>25 </a></div> </div> </article> |
JavaScript
All the information about magnific popup used for this element you can find HERE
Screenshots
Yoi will be able to check out the image and buy them arleady on the page.
Shop Item example
Shop item after hover example
This is the view you will get after choosing Image details.
Pop up item example