<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"> <div class="row"> <div class="col-md-4"> <div class="service-box"> <div class="service-icon orange"> <div class="front-content"> <i class="fa fa-anchor"></i> <h3>php developer</h3> <p style="color:#ffffff">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</p> </div> </div> <div class="service-content"> <h3>php developer</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</p> </div> </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: var(--white); 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:#2888c5; margin-bottom:10px; text-transform: uppercase; } .service-box .service-content p { font-size: 13px; color:#2888c5; margin:0; } .yellow{background-color: #2888c5;} .orange{background-color: #2888c5;} .red{background-color: #2888c5;} .grey{background-color: #2888c5;} .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); }