Cannot position text over image in a css grid system

Question

What I am trying to do is position text over these images. I want them to be in the bottom left corner but whatever I try, nothing seems to get them to work. I am able to change their size and color and padding but I am not able to place them where I want in the div. Any suggestion helps and I appreciate it all! Thankyou

HTML:

    <div class="grid">
    <div class="f f1">
        <h3>My Beautiful Dark Fantasy</h3>
    </div>
    <div class="f f2">
            <h3>My Beautiful Dark Fantasy</h3>
    </div>
    <div class="f f3">
        <h3>My Beautiful Dark Fantasy</h3>
    </div>
    <div class="f f4">
        <h3>My Beautiful Dark Fantasy</h3>
    </div>
    <div class="f f5">
        <h3>My Beautiful Dark Fantasy</h3>
    </div>
</div>

CSS

html {
height: 100%;
box-sizing: border-box;
}

body {
position: relative;
margin: 0;
padding-bottom: 6rem;
min-height: 100%;
font-family: "Helvetica Neue", Arial, sans-serif;
}


.nav {
background: #ddd;
padding: 20px;
margin: 0;
}

.nav a {
padding: 10px;
}

.grid { 
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-auto-rows: 350px;
margin: 30px 150px 30px 150px;
position: relative;
}

.f {
width: 100%;
height: 100%;
position: relative;
background-repeat: no-repeat;
background-size: cover;
background-color: grey;
}

.f h3{
color: white;
margin: 0;
padding: 10px;
}

.f1 {
grid-column: 1/3;
grid-row: 1/3;
background-image: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), 
url("/images/album/tyler.jpg");
}

.f2 {
grid-column: 3/4;
grid-row: 1/2;
background-image: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), 
url("/images/album/dope.jpg");

}

.f3 {
grid-column: 3/4;
grid-row: 2/4;
background-image: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), 
url("/images/album/kanye.jpg");

}

.f4 {
grid-column: 1/2;
grid-row: 3/4;
background-image: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), 
url("/images/album/selfie.jpg");

}

.f5 {
grid-column: 2/3;
grid-row: 3/4;
background-image: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), 
url("/images/album/fantasy.jpg");

}


.footer {
position: absolute;
right: 0;
bottom: 0;
left: 0;
padding: 1rem;
background-color: #efefef;
text-align: center;
}

ochs.tobi · Accepted Answer · 2018-05-09 07:43:07Z

3

a good solution is to stack the text grid and the image grid on top of each other by setting the grid-column and grid-rows to same for both. then just use z-index to bring thee text forward.

You can easily move the text anywhere now. It is responsive as well. Very powerful method we are able to utilize cause of css grid. You can get really creative with this method. Multi-stacking been working on making a single page webpage where you just get to various parts of pages by just bring forward the page you want. Hope this helps.

edited May 9, 2018 at 7:43

ochs.tobi

3,4727 gold badges34 silver badges53 bronze badges

answered May 9, 2018 at 5:35

arin

412 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

vwvan Over a year ago

how about an example

Zerus · Accepted Answer · 2018-01-12 22:56:43Z

1

What I am trying to do is position text over these images.

In given example, try to change this:

.f h3{
color: white;
margin: 0;
padding: 10px;
}

to this:

.f h3{
color: white;
margin: 0;
padding: 10px;
position:absolute;
left:0;
bottom:0;
}

Adding absolute positioning inside an .f which is positioned relative should work.

answered Jan 12, 2018 at 22:56

Zerus

16815 bronze badges

Comments

kirqe · Accepted Answer · 2018-07-11 13:42:36Z

1

having the following html

  <div class="item image-text-center">
    <img src="img/2.jpg" alt="">
    <div class="text">Hello, World</div>
  </div>

this will center the text

.item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}


.item.image-text-center .text{
  color: var(--white);
  padding: 10px;
  position:absolute;
  display: grid;
  align-self: center;
  justify-self: center;
}

edited Jul 11, 2018 at 13:42

answered Jun 30, 2018 at 18:17

kirqe

2,4704 gold badges40 silver badges64 bronze badges

Collectives™ on Stack Overflow

Cannot position text over image in a css grid system

3 Answers 3

1 Comment

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Related