"blog"
Bootstrap 4.0.0 Snippet by jeevan123456

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.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 ----------> <div class="container"> <div class="row"> <div class="col-md-3"> <div class="card"> <div class="card-img-top"> <div class="text-overlay"> <a href="#"class="text-white">Design</a> </div> <img src="https://assets.wordpress.envato-static.com/uploads/2018/05/Immediately-after-Sunset.jpg"> </div> <div class="card-body"> <div class="c-title "> <a href="#"><p>How to Customize a Logo Sting in Adobe After Effects</p></a> <p>WordPress is about to change in a really big way. After many months of development and testing, the platform is …</p> </div> <div class="c-footer"> <ul class="list-inlne list-unstyled"> <li class="list-inline-item"><a href="#"class="text-secondary"><small>by:Janmes</small></li></a> <li class="list-inline-item"><a href="#"class="text-secondary"><small>3 Weeks Ago</small></li></a> </ul> </div> </div> </div> </div> <div class="col-md-3 "> <div class="card"> <div class="card-img-top"> <img src="https://assets.wordpress.envato-static.com/uploads/2018/05/Immediately-after-Sunset.jpg"> </div> <div class="card-body"> <div class="c-category"> <a href="#"class="text-danger"><small>Design</small></a> </div> <div class="c-title "> <a href="#"><p>How to Customize a Logo Sting in Adobe After Effects</p></a> <p>WordPress is about to change in a really big way. After many months of development and testing, the platform is …</p> </div> <div class="c-footer"> <ul class="list-inlne list-unstyled"> <li class="list-inline-item"><a href="#"class="text-secondary"><small>by:Janmes</small></li></a> <li class="list-inline-item"><a href="#"class="text-secondary"><small>3 Weeks Ago</small></li></a> </ul> </div> </div> </div> </div> <div class="col-md-3"> <div class="card "> <div class="card-img-top"> <img src="https://assets.wordpress.envato-static.com/uploads/2018/05/Immediately-after-Sunset.jpg"> </div> <div class="card-body"> <div class="c-category"> <a href="#"class="text-danger"><small>Design</small></a> </div> <div class="c-title "> <a href="#"><p>How to Customize a Logo Sting in Adobe After Effects</p></a> <p>WordPress is about to change in a really big way. After many months of development and testing, the platform is …</p> </div> <div class="c-footer"> <ul class="list-inlne list-unstyled"> <li class="list-inline-item"><a href="#"class="text-secondary"><small>by:Janmes</small></li></a> <li class="list-inline-item"><a href="#"class="text-secondary"><small>3 Weeks Ago</small></li></a> </ul> </div> </div> </div> </div> <div class="col-md-3"> <div class="card "> <div class="card-img-top"> <img src="https://assets.wordpress.envato-static.com/uploads/2018/05/Immediately-after-Sunset.jpg"> </div> <div class="card-body"> <div class="c-category"> <a href="#"class="text-danger"><small>Design</small></a> </div> <div class="c-title "> <a href="#"><p>How to Customize a Logo Sting in Adobe After Effects</p></a> <p>WordPress is about to change in a really big way. After many months of development and testing, the platform is …</p> </div> <div class="c-footer"> <ul class="list-inlne list-unstyled"> <li class="list-inline-item"><a href="#"class="text-secondary"><small>by:Janmes</small></li></a> <li class="list-inline-item"><a href="#"class="text-secondary"><small>3 Weeks Ago</small></li></a> </ul> </div> </div> </div> </div> </div> </div>
img {width:100%;} .text-overlay { width: 100%; margin: 53% 0; position: absolute; z-index: 1; font-size:18px; }

Related: See More


Questions / Comments: