"Untitled"
Bootstrap 4.1.1 Snippet by dkstudio

<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"> <h2>Create your snippet's HTML, CSS and Javascript in the editor tabs</h2> <div class="col-6"> <div class="mydiv"> <div class="service-sec-list srvc-bg-nx srcl1"> <img src="https://www.dkstudio.in/img/logo.png" alt="service"> <h5 class="mb10">Web Development</h5> <ul class="-service-list"> <li> <a href="#">PHP</a> </li> <li> <a href="#"><strong>.</strong>Net</a> </li> <li> <a href="#">Java</a> </li> <li> <a href="#">Joomla</a></li> </ul> <p>Lorem Ipsum is text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500.</p> </div> </div> </div> </div> </div>
*, h1, h2, h3, h4, h5, h6, p, ul { margin: 0; padding: 0; } .mydiv { visibility: visible; animation-delay: 0.4s; animation-name: fadeInUp; will-change: transform; transform: perspective(1000px) rotateX(0deg) rotateY(0deg) scale3d(1, 1, 1);} { visibility: visible; animation-delay: 0.4s; animation-name: fadeInUp; will-change: transform; transform: perspective(1000px) rotateX(0deg) rotateY(0deg) scale3d(1, 1, 1); } .service-sec-list, .service-sec-list:hover, .service-sec-list:hover p { -moz-transition: all .8s; -o-transition: all .8s; -webkit-transition: all .8s; transition: all .8s; } .service-sec-list { padding: 52px 25px; } .srvc-bg-nx { background: #fff; border-radius: 6px; margin: 0 10px; height: 240px; -webkit-box-shadow: 0 3.4px 2.7px -30px rgba(0,0,0,.059), 0 8.2px 8.9px -30px rgba(0,0,0,.071), 0 25px 40px -30px rgba(0,0,0,.2); box-shadow: 0 3.4px 2.7px -30px rgba(0,0,0,.059), 0 8.2px 8.9px -30px rgba(0,0,0,.071), 0 25px 40px -30px rgba(0,0,0,.2); } .srcl1 { background: #f3f5ff; border-bottom: 4px solid #b0bdff; } .srvc-bg-nx { overflow: hidden; } * { -webkit-font-smoothing: antialiased; -moz-os-font-smoothing: grayscale; box-sizing: border-box; vertical-align: baseline; } .service-sec-list img { -moz-transition: width .5s,height .5s; -webkit-transition: width .5s,height .5s; transition: width .5s,height .5s; height: 60px; width: 60px; margin-bottom: 10px; } html .mb10 { margin-bottom: 10px; } h5 { font-size: 20px; line-height: 30px; } ul { list-style: none; } .-service-list li:first-child { padding-left: 0; } .-service-list li { list-style: none; padding: 0 8px; border-right: 1px solid #d4d4d4; display: inline-block; } .-service-list li, .common-heading-2>span, .dropcap, .sctxt { text-transform: uppercase; } .-service-list li a { font-size: 13px; color: #6a6a8e; text-transform: uppercase; text-decoration: none; padding-bottom: 5px; display: inline-block; font-weight: 700; } a { -webkit-transition: 1.2s cubic-bezier(.17,.85,.438,.99); -o-transition: 1.2s cubic-bezier(.17,.85,.438,.99); transition: 1.2s cubic-bezier(.17,.85,.438,.99); } .service-sec-list p { display: none; } .service-sec-list p { font-size: 15px; line-height: 24px; margin: 14px 0 0; } .service-sec-list:hover img { height: 0; width: 60px; } .service-sec-list:hover p { display: block; }

Related: See More


Questions / Comments: