<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/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 ----------> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <div class="wrapper"> <section class="ulockd-blog"> <div class="container"> <div class="row"> <div class="col-md-6 col-md-offset-3 text-center"> <div class="ulockd-main-title"><br> <h2 class="mt-separator">Design by <a target="_blank" href="http://www.wedoodles.com/">Koshik ojha</a></h2><br><br> </div> </div> </div> <div class="row"> <div class="col-xxs-12 col-xs-6 col-sm-6 col-md-4"> <div class="blog_post"> <div class="thumb"> <img class="img-responsive img-whp" src="http://unlockdesizn.com/html/corporate/cryptocurrency/kryptocoin/demo/images/blog/1.jpg" alt="1.jpg"> <div class="overlay"> <h5 class="title-bottom">Business Post</h5> <h3>Build A Cryptocurrency Website By Kryptocoin</h3> <p class="ulockd-mrgn1215">Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, discovered the undoubtable source.</p> <a class="btn btn-lg ulockd-btn-thm2" href="#">Read More</a> </div> </div> <div class="details"> <h4 class="post_date ulockd-bgthm">20 Dec 2018</h4> <h3>Build A Cryptocurrency Website By Kryptocoin</h3> <ul class="list-inline"> <li><a href="#"><span class="fa fa-user text-thm2"></span> UlockDesign</a></li> <li><a href="#"><span class="fa fa-comment text-thm2"></span> 67</a></li> <li><a href="#"><span class="fa fa-heart text-thm2"></span> 260</a></li> <li><a href="#"><span class="fa fa-share text-thm2"></span> 157</a></li> </ul> </div> </div> </div> <div class="col-xxs-12 col-xs-6 col-sm-6 col-md-4"> <div class="blog_post"> <div class="thumb"> <img class="img-responsive img-whp" src="http://unlockdesizn.com/html/corporate/cryptocurrency/kryptocoin/demo/images/blog/2.jpg" alt="2.jpg"> <div class="overlay"> <h5 class="title-bottom">Bitcoin Post</h5> <h3>Build A Cryptocurrency Website By Kryptocoin</h3> <p class="ulockd-mrgn1215">Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, discovered the undoubtable source.</p> <a class="btn btn-lg ulockd-btn-thm2" href="#">Read More</a> </div> </div> <div class="overlay"></div> <div class="details"> <h4 class="post_date ulockd-bgthm">20 Dec 2018</h4> <h3>Build A Cryptocurrency Website By Kryptocoin</h3> <ul class="list-inline"> <li><a href="#"><span class="fa fa-user text-thm2"></span> UlockDesign</a></li> <li><a href="#"><span class="fa fa-comment text-thm2"></span> 67</a></li> <li><a href="#"><span class="fa fa-heart text-thm2"></span> 260</a></li> <li><a href="#"><span class="fa fa-share text-thm2"></span> 157</a></li> </ul> </div> </div> </div> <div class="col-xxs-12 col-xs-6 col-sm-6 col-md-4"> <div class="blog_post"> <div class="thumb"> <img class="img-responsive img-whp" src="http://unlockdesizn.com/html/corporate/cryptocurrency/kryptocoin/demo/images/blog/3.jpg" alt="3.jpg"> <div class="overlay"> <h5 class="title-bottom">Digital Coin Post</h5> <h3>Build A Cryptocurrency Website By Kryptocoin</h3> <p class="ulockd-mrgn1215">Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, discovered the undoubtable source.</p> <a class="btn btn-lg ulockd-btn-thm2" href="#">Read More</a> </div> </div> <div class="overlay"></div> <div class="details"> <h4 class="post_date ulockd-bgthm">20 Dec 2018</h4> <h3>Build A Cryptocurrency Website By Kryptocoin</h3> <ul class="list-inline"> <li><a href="#"><span class="fa fa-user text-thm2"></span> UlockDesign</a></li> <li><a href="#"><span class="fa fa-comment text-thm2"></span> 67</a></li> <li><a href="#"><span class="fa fa-heart text-thm2"></span> 260</a></li> <li><a href="#"><span class="fa fa-share text-thm2"></span> 157</a></li> </ul> </div> </div> </div> </div> </div> </section> </div>

@import url(https://fonts.googleapis.com/css?family=Lato|Montserrat:600,700,800); .ulockd-ip-latest-news { background-color: #f7f7f7; } .ulockd-ip-latest-news .ulockd-ext-spc { margin-bottom: 50px; } .blog_post { border-radius: 10px; position: relative; overflow: hidden; } .blog_post .thumb { position: relative; } .blog_post .thumb .overlay { border-radius: 10px; bottom: 0; background-color: #f5f5f5; display: inline-block; padding: 30px; position: absolute; top: 0; z-index: -1; -webkit-transition: all 0.4s ease-in-out; -o-transition: all 0.4s ease-in-out; transition: all 0.4s ease-in-out; -webkit-transform: scale(0); -moz-transform: scale(0); -o-transform: scale(0); transform: scale(0); } .blog_post .details { background-color: rgba(0, 0, 0, 0.4); bottom: 0; padding: 15px; position: absolute; -webkit-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; } .blog_post .details h3 { color: #ffffff; margin-top: 0; } .blog_post .details .post_date { border-radius: 5px; color: #ffffff; font-size: 18px; left: 0; position: absolute; padding: 10px; text-align: center; top: -200%; -webkit-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; } .blog_post .details a { color: #ffffff; } .blog_post:hover .details { bottom: -100%; } .blog_post:hover .details .post_date { left: -100%; } .blog_post:hover .thumb .overlay { -webkit-transform: scale(1); -moz-transform: scale(1); -o-transform: scale(1); transform: scale(1); -webkit-transform-origin: top right; -moz-transform-origin: top right; -o-transform-origin: top right; transform-origin: top right; z-index: 9; } .blog-post { background-color: #f5f5f5; overflow: hidden; position: relative; } .blog-post .post-thumb { position: relative; overflow: hidden; } .blog-post .post-thumb .post_date { background-color: #f5f5f5; font-size: 18px; font-weight: 500; left: 0; position: absolute; padding: 10px; text-align: center; top: 0; } .blog-post h3 { margin-top: 0; } .eventdate { background: rgba(255, 255, 255, 0.85); box-sizing: border-box; font-size: 16px; left: 15px; line-height: 1; padding: 8px; position: absolute; top: 15px; width: 60px; } .bp-details { padding: 14px 20px; } .bp-details .post-title { margin-top: 0; } .bp-details p { font-size: 16px; margin-top: 10px; } .bpost-detail { padding: 14px 20px; } .ulockd-bp-details { background-color: #ffffff; padding: 10px 15px 20px; } .ulockd-bp-details.style2:hover { cursor: pointer; } .ulockd-bpost { margin-top: 10px; } .ulockd-bp-title h3 { color: #333333; font-weight: 400; margin-top: 15px; } .ulockd-bp-btn { padding-bottom: 3px; -webkit-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; }