Css styles:
.ct-image-container–GiftCard
.ct-image–border
.ct-image–hover
.ct-image–steps
.ct-featuredItem
Gift card image containert
Screenshot:
Image container – gift card
Markup:
|
1 2 3 |
<div class="ct-image-container--GiftCard"> <div class="ct-image-container--mainBody"><img src="assets/images/demo-content/gift-icon.png"></div> </div> |
Border image container
Screenshot:
Image container – border
Markup:
|
1 |
<div class="ct-image--border"><img src="assets/images/demo-content/random-image.jpg" alt="image"></div> |
Steps image containert
Screenshot:
Image container – steps
Markup:
|
1 2 3 4 5 |
<div class="ct-image--steps text-center"> <div class="ct-image-container"><img src="assets/images/demo-content/wedding.png" alt=""> <div class="ct-stepsBox"><span class="text-left text-uppercase ct-fw-700">step</span><span class="text-right ct-number">1</span></div> </div><span class="h4 ct-fw-300 text-uppercase ct-image-title">choose <span class="ct-fw-600">your location</span></span><span>Select your destination.</span> </div> |
Featured items image containert with hover
Screenshot:
Image container – feature image
Markup:
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<div class="ct-image--hover"><a href="#"><img src="assets/images/demo-content/package2.jpg" alt=""></a> <div class="ct-image-text"><span class="h3 ct-fw-300 text-uppercase">pre-designed <span class="ct-fw-600">themes</span></span> <div class="image-label">Inspiration that fits your style.</div> </div> <div class="ct-featuredItem"> <div class="ct-featuredItem-inner"><span class="ct-featuredItem-title ct-fw-700">Beautiful Beginnings</span><span class="ct-featuredItem-tag ct-fw-300">Wedding Themes</span> <div class="ct-strip"> <div class="ct-strip-inner">Free Now</div> </div> </div> </div> </div> |