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

user_14522955 0
Viewed 28

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>

css html
1 Answers

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>

user_111350920
Related