CODEWITHSUNDEEP
htmlcssimageoverlay
pablothefreelancer
pablothefreelancer

Reputation: 1

How to overlay text on to an flexbox images inside a container and make it responsive

Image links down below for example of how my page looks.

        I have managed to align each image which are housed in 
            <div class="parent">
              <div class="teenager">

        I can't get the text(s) to sit on top each blue shape. 

        I tried using using z-index, setting each image box as relative and tried setting the text both as absolute and using z-index. But then it will stay static when the resolution is changed.

This is where are each image sits inside

For now I have like the text by itself in

I am a teenager

and

I am a parent/carer

Image one shows how the page looks at 1000px everything is responsive just not the text as I couldn't get the combination right using flexbox,grid, relative and absolute with z-index or Bootstrap. https://ibb.co/RQYcJ8m

Image two is a mobile size. again the background images and blues shapes are responsive but the text won't to sit on the blues shapes without using relative. https://ibb.co/0Gr59sM

I would like the text to display in front of the blue shapes and not fixed in place so it can be responsive

Also a Bootstrap 4 container-fluid is applied with no padding or margins.

I've been trying to figure this out for days!

Upvotes: 0

Views: 1200

Answers (2)

khan
khan

Reputation: 1464

You would want your parent-child relationship to be:

<div class="blue-circle">
    <h2 class="hero__subtitle">I am a parent/carer</h2>
</div>

<div class="blue-circle">
    <h2 class="hero__subtitle">I am a teenager</h2>
</div>

where each .hero__subtitle has position: absolute and each .blue-circle has position: relative.

You can then use Flexbox to vertically and horizontally align each .hero__subtitle. You will also need to remove the margin and padding on your <h2> if you haven't done so.

.hero {
    /* space-around is used to provide equal spacing between and around
       the circles. align-items is used to center the circles vertically. */
    display: flex;
    justify-content: space-around;
    align-items: center;
    width: 100%;
    height: 500px;
    background: url(https://unsplash.it/1000);
}


/* The position is set to relative in order to keep the absolute
   positioning of the h2 in relation to the circle.
   
   I used Flexbox again to ensure the hero subtitles are vertically
   and horizontally aligned. */
.blue-circle {
    position: relative;
    z-index: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: lightblue;
    opacity: 0.5;
    width: 250px;
    height: 250px;
    border-radius: 100%;
}

/* The subtitle has a position of absolute in relation to the blue circle. 
   Margin and padding are removed to prevent any misalignments. */
.hero__subtitle {
    margin: 0;
    padding: 0;
    position: absolute;
    z-index: 1;
}
<div class="hero">
    <div class="blue-circle">
        <h2 class="hero__subtitle">I am a parent/giver</h2>
    </div>

    <div class="blue-circle">
        <h2 class="hero__subtitle">I am a teenager</div>
    </div>
</div>

Upvotes: 1

symlink
symlink

Reputation: 12208

Flexbox should do the trick:

html, body, .container{
    height: 100%;
}

.container{
    display: flex;
    align-items: center;
    justify-content: center;
    background: orangered;
    min-height: 350px;
}

.circle{
    background-color: dodgerblue;
    opacity: 0.8;
    border-radius: 50%;
    height: 200px;
    width: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.circle:first-child{
    margin-right: 40px;
}
<div class="container">
    <div class="circle">
        <h2>I am a parent/care giver</h2>
    </div>

    <div class="circle">
        <h2>I am a teenager</h2>
    </div>
</div>

Upvotes: 0

Related Questions