<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='card'> <div class='img-cont'> <span class='drop-down-window'>25 USD</span> <img class='img' src="https://images.unsplash.com/photo-1600195958024-0eb8a5aff3b5?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ" alt=""> </div> <div class='content-cont'> <span class='card-header'>Standard</span> <span class='card-body'>Get the most economic subscription and start your journey to the pro world </span> </div> </div>

body { display: flex; justify-content: center; align-items: center; height: 100vh; } .card { box-shadow: 0 0 30px rgba(0, 0, 0, 0.2); border-radius: 15px; width: 300px; overflow: hidden; } .card .img-cont { overflow: hidden; position: relative; clip-path: polygon(0 0, 100% 0, 100% 100%, 0 90%); } .card .img-cont img { z-index: 0; width: 100%; transform: scale(1.2); transition: all 0.3s; } .card .content-cont span { display: block; } .card .content-cont .card-header { text-transform: uppercase; font-weight: bold; padding-bottom: 10px; font-size: 20px; } .card .content-cont .card-body { font-family: sans-serif; }