"Feature"
Bootstrap 4.1.1 Snippet by Nemra1

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <section id="feature" class="sec-padding sec-dark"> <div class="container"> <div class="row row-no-padding"> <div class="col-md-6 col-sm-12 col-xs-12"> <div class="feature-title"> <h3>Feature</h3> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it.</p> </div> </div> <div class="col-md-3 col-sm-6 col-xs-12"> <div class="feature-block"> <div class="feature-block-item"> <i class="fa fa-sun-o" aria-hidden="true"></i> <h5>Innovative Idea</h5> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</p> </div> <div class="feature-block-overlay"></div> </div> </div> <div class="col-md-3 col-sm-6 col-xs-12"> <div class="feature-block"> <div class="feature-block-item"> <i class="fa fa-check-square-o" aria-hidden="true"></i> <h5>Clean and Valid code</h5> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</p> </div> <div class="feature-block-overlay"></div> </div> </div> <div class="col-md-3 col-sm-6 col-xs-12"> <div class="feature-block"> <div class="feature-block-item"> <i class="fa fa-cog" aria-hidden="true"></i> <h5>Customize color</h5> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</p> </div> <div class="feature-block-overlay"></div> </div> </div> <div class="col-md-3 col-sm-6 col-xs-12"> <div class="feature-block"> <div class="feature-block-item"> <i class="fa fa-bolt" aria-hidden="true"></i> <h5>Easy to use</h5> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</p> </div> <div class="feature-block-overlay"></div> </div> </div> <div class="col-md-3 col-sm-6 col-xs-12"> <div class="feature-block"> <div class="feature-block-item"> <i class="fa fa-thumbs-o-up" aria-hidden="true"></i> <h5>Elegent and Perfect</h5> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</p> </div> <div class="feature-block-overlay"></div> </div> </div> <div class="col-md-3 col-sm-6 col-xs-12"> <div class="feature-block"> <div class="feature-block-item"> <i class="fa fa-battery-three-quarters" aria-hidden="true"></i> <h5>Long Use Of Bettery</h5> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</p> </div> <div class="feature-block-overlay"></div> </div> </div> </div> </div> </section>
/* Feature Section */ .feature-title { padding-right: 30px; } .feature-title h3 { text-transform: uppercase; font-size: 25px; } .feature-title h3:after { content: ''; display: block; width: 90px; border-top: 1px solid #ff5f83; margin: 15px 0; } .feature-block { position: relative; border: 1px solid #ddd; height: 216px; text-align: center; } .feature-block .feature-block-overlay { width: 100%; height: 100%; position: absolute; overflow: hidden; top: 0px; left: 0; opacity: 0; background-color: #3fb4e5; text-align: center; box-shadow: rgba(0, 0, 0, 0.10) 0px 15px 45px 0px; z-index: 1; } .feature-block:hover .feature-block-overlay { opacity: 1; } .feature-block-item { padding-top: 55px; } .feature-block-item .fa { font-size: 50px; color: #ff5f83; } .feature-block-item h5 { color: #333; text-transform: uppercase; font-size: 14px; margin-top: 30px; } .feature-block-item p { position: absolute; opacity: 0; font-size: 12px; } .feature-block:hover .feature-block-item h5, .feature-block:hover .feature-block-item p { position: absolute; z-index: 2222; opacity: 1; color: #333; color: #fff; left: 0; right: 0; margin: 0 auto; } .feature-block:hover .feature-block-item h5 { top: 40px; } .feature-block:hover .feature-block-item p { top: 70px; padding: 0 10px; }

Related: See More


Questions / Comments: