Image overlap on top of container with content - html

Question

What is the best way to have an image on top of a card with content underneath it?
I have tried negative margins but I have had no luck on with this approach.
I attached an image of what the look and feel I am going for:
Here is my attempt on code
.card {
text-decoration: none;
margin-right: 20px;
text-align: center;
}
.card__section {
overflow: hidden;
padding-bottom: 50px;
display: block;
position: relative;
}
.card__inner {
background: black;
padding: calc(35px + 30%) 35px 35px;
color: white;
width: 100%;
display: block;
position: relative;
}
.card__image {
width: 80%;
height: auto;
margin: 0 auto -30%;
position: relative;
z-index: 1;
}
<a href="#" class="card">
<section class="card__section">
<img
class="card__image"
src="http://via.placeholder.com/340x220"
alt=""
/>
<div class="card__inner">
<h1>
This is a static template, there is no bundler or bundling
involved!
</h1>
</div>
</section>
</a>

Answer 1

you need to add below css
.card__section {
overflow: visible;
}
.card__image {
margin-bottom: 20px;
margin-top: -100px;
}
section.card__section {
margin-top: 60px;
}
and put your image in card__inner div
see https://codesandbox.io/s/card-hover-5n0yf?file=/index.html:450-461
hope this helps

Answer 2

You're almost there! There are two things that need to be updated:
1. Remove extra % in .card__image
.card__image {
width: 80%;
height: auto;
margin: 0 auto -30%%; // <-- Remove extra % at the end.
position: relative;
z-index: 1;
}
2. Adjust padding in .card__inner due to negative margin on previous element.
.card__inner {
background: black;
// Update padding to below. Negative margin on previous element needs to be added to the top padding.
padding: calc(35px + 30%) 35px 35px;
color: white;
width: 100%;
display: block;
position: relative;
}
Sandbox: https://codesandbox.io/s/card-hover-wiilf