Css styles:
.ct-squareThumbnail
.ct-squareThumbnail–withHover
Standard faq thumbnails
Screenshot:
Markup:
1 2 3 4 5 6 7 8 9 10 |
<div class="ct-squareThumbnail"> <div class="ct-squareThumbnail-body"> <div class="ct-squareThumbnail-title"><span class="ct-fw-700 text-uppercase">secured flight passenger data</span><i class="fa fa-lock"></i></div> <div class="ct-squareThumbnail-content"> . . . </div> </div> </div> |
Faq thumbnails with special hover
Screenshot:
Markup:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<div class="ct-squareThumbnail ct-squareThumbnail--withHover ct-u-marginBottom30"> <div class="ct-squareThumbnail-body"> <div class="ct-squareThumbnail-title text-center"><span class="ct-fw-700">BILLING & PAYMENT</span></div> <div class="ct-squareThumbnail-content"> <ul class="list-unstyled"> <li><a href="#" class="ct-fw-700">Q. How do I change my flights?</a></li> <li><a href="#" class="ct-fw-700">Q. What is an "E" ticket?</a></li> <li><a href="#" class="ct-fw-700">Q. Why are the fares different from other sites?</a></li> </ul> </div> <div class="ct-squareThumbnail-button"><a href="#"></a></div> </div> <div class="ct-squareThumbnail-mask"><i class="fa ct-u-marginBottom30 fa-dollar"></i> <div class="ct-squareThumbnail-text"><span class="ct-fw-700">BILLING & PAYMENT</span></div> </div> </div> |