Why isn't the superimposed picture & logo + text working? - html

Question

I had to change the logo's resolution to at least be able to see the logo (format was 3400x1716) to 99x50 for overlapping the picture and added a text with the logo.
I set the pictures that are supposed to get superimposed to 300 height and 100% width to fill out the rest of the page, but that is shown in my code.
The end product will be that I will be able to hover over the picture/logo and the text appears.
My problem is that I can't see the logo nor the text that should superimpose the picture.
In total for 12 pictures with 12 different text's but the same logo.
.portfolio-items-wrapper {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
}
.portfolio-item-wrapper {
position: relative;
}
.portfolio-img-background {
height: 300px;
width: 100%;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.img-text-wrapper {
position: absolute;
top: 0;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100%;
text-align: center;
padding-left: 100%;
padding-right: 100%;
}
<div class="content-wrapper">
<div class="portfolio-items-wrapper">
<div class="portfolio-item-wrapper">
<div class="portfolio-img-background" style="background- image:url(images/portfolio1.jpg)"></div>
<div class="img-text-wrapper">
<div class="logo-wrapper">
<img src="images/logos/thought.png">
</div>
<div class="subtitle">
Using a different approach than the NORM!
</div>
</div>
</div>
<div class="portfolio-item-wrapper">
<div class="portfolio-img-background" style="background- image:url(images/portfolio2.jpg)"></div>
<div class="img-text-wrapper">
<div class="logo-wrapper">
<img src="images/logos/thought.png">
</div>
<div class="subtitle">
Everything starts with a THOUGHT!
</div>
</div>
</div>
</div>
</div>

Answer 1

You can use the approach you started using, that is setting a background-image to your parent container element, and then you can position the text and logo elements using flexbox.
img {
width:50px;height:50px;
}
div {
background-image:url('https://static-cse.canva.com/image/1578/RoyalBlue_Set1_23.5dfc6872.png');
background-size:contain;
background-repeat:no-repeat;
background-position:center center;
width:300px;height:300px;
display:flex;align-items:center;flex-direction:column;justify-content:center;
color:#FFF;font-size:36px;
}
<div>
<img src="https://assets.codepen.io/5200861/internal/avatars/users/default.png">
<h3>some text here</h3>
</div>