"image with card"
Bootstrap 4.1.1 Snippet by NitinElegant

<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 ----------> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous"> <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script> <!-- FONTS --> <link href="https://fonts.googleapis.com/css?family=Lato:400,700,900&display=swap" rel="stylesheet"> <!-- FONTAWESOME --> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.css"> <div class="col-sm-6 text-center "> <div class="p-1 mb-2"> <div class="card mb-2 card-4" > <div class="view view-cascade overlay"> <img class="card-img-top p-2 card-images" src="https://picsum.photos/500/200" alt="Card image cap"> </div> </div> <div class="mt-n5 rounded mr-5 ml-5 shadow pl-3 pr-3 pt-2 pb-1 bg-white rounded upper" > <a href="/" class="h4 text-dark mt-4"> <strong> <i class="fas fa-quote-left text-danger align-top"></i> Top 5 Questions to Ask About Web Hosting <i class="fas fa-quote-right text-danger align-top"></i> </strong> </a> <p class="mt-1" style="font-size: 15px;color: #e95095;"> Posted by:-Russell Wiltenburg </p> </div> </div> </div>
.upper{ position: relative; }

Related: See More


Questions / Comments: