"Service Box"
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 ----------> <div class="container"> <h1>Service box</h1> <div class="row"> <div class="col-md-3 col-sm-6 "> <div class="service-box"> <div class="service-icon yellow"> <div class="front-content"> <i class="fa fa-trophy"></i> <h3>design</h3> </div> </div> <div class="service-content"> <h3>design</h3> <p>No one rejects, dislikes, or avoids pleasure itself, because it is pleasure, but because those who do not know how to pursue pleasure</p> </div> </div> </div> <div class="col-md-3 col-sm-6 "> <div class="service-box"> <div class="service-icon orange"> <div class="front-content"> <i class="fa fa-anchor"></i> <h3>php</h3> </div> </div> <div class="service-content"> <h3>php developer</h3> <p>No one rejects, dislikes, or avoids pleasure itself, because it is pleasure, but because those who do not know how to pursue pleasure</p> </div> </div> </div> <div class="col-md-3 col-sm-6"> <div class="service-box "> <div class="service-icon red"> <div class="front-content"> <i class="fa fa-trophy"></i> <h3>Ui Developer</h3> </div> </div> <div class="service-content"> <h3>Developer</h3> <p>No one rejects, dislikes, or avoids pleasure itself, because it is pleasure, but because those who do not know how to pursue pleasure</p> </div> </div> </div> <div class="col-md-3 col-sm-6"> <div class="service-box"> <div class="service-icon grey"> <div class="front-content"> <i class="fa fa-paper-plane-o"></i> <h3>java script</h3> </div> </div> <div class="service-content"> <h3>java script</h3> <p>No one rejects, dislikes, or avoids pleasure itself, because it is pleasure, but because those who do not know how to pursue pleasure</p> </div> </div> </div> </div>
h1{ font-size:25px; text-align: left; text-transform:capitalize; } .service-box{ position: relative; overflow: hidden; margin-bottom:10px; perspective:1000px; -webkit-perspective:1000px; } .service-icon{ width: 100%; height: 220px; padding: 20px; text-align: center; transition: all .5s ease; } .service-content{ position: absolute; top: 0; left: 0; z-index: 1; opacity: 0; width: 100%; height: 220px; padding: 20px; text-align: center; transition: all .5s ease; background-color: #474747; backface-visibility:hidden; transform-style: preserve-3d; -webkit-transform: translateY(110px) rotateX(-90deg); -moz-transform: translateY(110px) rotateX(-90deg); -ms-transform: translateY(110px) rotateX(-90deg); -o-transform: translateY(110px) rotateX(-90deg); transform: translateY(110px) rotateX(-90deg); } .service-box .service-icon .front-content{ position: relative; top:80px; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); } .service-box .service-icon .front-content i { font-size: 28px; color: #fff; font-weight: normal; } .service-box .service-icon .front-content h3 { font-size: 15px; color: #fff; text-align: center; margin-bottom: 15px; text-transform: uppercase; } .service-box .service-content h3 { font-size: 15px; font-weight: 700; color: #fff; margin-bottom:10px; text-transform: uppercase; } .service-box .service-content p { font-size: 13px; color: #b1b1b1; margin:0; } .yellow{background-color: #ffc000;} .orange{background-color: #fc7f0c;} .red{background-color: #e84b3a;} .grey{background-color: #474747;} .service-box:hover .service-icon{ opacity: 0; -webkit-transform: translateY(-110px) rotateX(90deg); -moz-transform: translateY(-110px) rotateX(90deg); -ms-transform: translateY(-110px) rotateX(90deg); -o-transform: translateY(-110px) rotateX(90deg); transform: translateY(-110px) rotateX(90deg); } .service-box:hover .service-content { opacity: 1; -webkit-transform: rotateX(0); -moz-transform: rotateX(0); -ms-transform: rotateX(0); -o-transform: rotateX(0); transform: rotateX(0); }

Related: See More


Questions / Comments: