I currently have a webpage featuring cards. Each card includes a thumbnail at the top with an overlay. The main content of the card needs to be positioned outside of the overlay, but it ends up overflowing onto it.
Take a look at the demo:
https://codepen.io/snarex/pen/NWKbgZM
The example below showcases my card design:
<div class="card shadow bg-white rounded">
<a href="#">
<img src="https://placeimg.com/640/360/any" class="card-img-top" alt="...">
<div class="card-img-overlay text-center d-flex">
<img src="http://wptf.com/wp-content/uploads/2014/05/play-button.png"
class="w-25 align-self-center mx-auto "
alt="">
</div>
</a>
<div class="card-body">
<h5 class="card-title">
<a href="#" class="text-info">*</a></h5>
</div>
I am aiming to achieve a design similar to the one in the codepen demo, but with the addition of a play button, like the one in the image below: https://i.sstatic.net/3cZmQ.png