3 x 3 grid, cant place text above each img in ul

Question

I'm trying to place text over each individual img in a li, making a 3 x 3 grid. I'm using the ul to keep the images nice and responsive but cant seem to place text above them individually.

This is what I am hoping to acheive

http://tinypic.com/view.php?pic=e7fqld&s=8#.U4h3LPldUrU

And here is what I have :

http://jsfiddle.net/rfvM2/

<div id="gallery">
        <ul>            
            <li>
                <div class="gallery-image">                
                <a href=""><img src="http://lorempixel.com/output/nature-q-c-340-220-7.jpg"/>
                <p>A Movie in the Park:<br />Kung Fu Panda</p></a>
                </div>         
            </li>
            <li>
                <div class="gallery-image">                
                <a href=""><img src="http://lorempixel.com/output/nature-q-c-340-220-7.jpg"/>
                <p>A Movie in the Park:<br />Kung Fu Panda</p></a>
                </div>         
            </li>
            <li>
                <div class="gallery-image">                
                <a href=""><img src="http://lorempixel.com/output/nature-q-c-340-220-7.jpg"/>
                <p>A Movie in the Park:<br />Kung Fu Panda</p></a>
                </div>         
            </li>
            <li>
                <div class="gallery-image">                
                <a href=""><img src="http://lorempixel.com/output/nature-q-c-340-220-7.jpg"/>
                <p>A Movie in the Park:<br />Kung Fu Panda</p></a>
                </div>         
            </li>
            <li>
                <div class="gallery-image">                
                <a href=""><img src="http://lorempixel.com/output/nature-q-c-340-220-7.jpg"/>
                <p>A Movie in the Park:<br />Kung Fu Panda</p></a>
                </div>         
            </li>
            <li>
                <div class="gallery-image">                
                <a href=""><img src="http://lorempixel.com/output/nature-q-c-340-220-7.jpg"/>
                <p>A Movie in the Park:<br />Kung Fu Panda</p></a>
                </div>         
            </li>
            <li>
                <div class="gallery-image">                
                <a href=""><img src="http://lorempixel.com/output/nature-q-c-340-220-7.jpg"/>
                <p>A Movie in the Park:<br />Kung Fu Panda</p></a>
                </div>         
            </li>
            <li>
                <div class="gallery-image">                
                <a href=""><img src="http://lorempixel.com/output/nature-q-c-340-220-7.jpg"/>
                <p>A Movie in the Park:<br />Kung Fu Panda</p></a>
                </div>         
            </li>
            <li>
                <div class="gallery-image">                
                <a href=""><img src="http://lorempixel.com/output/nature-q-c-340-220-7.jpg"/>
                <p>A Movie in the Park:<br />Kung Fu Panda</p></a>
                </div>         
            </li>            
         </ul>
        </div>

I was hoping to have the text overlay the image, so the picture is underneath and the text is central above :) — user3661106, May 30 '14 at 12:07
Well, that was my point. How do we know what exactly you want..? please update the question with proper information.. if possible an image of the expected result or so.. — T J, May 30 '14 at 12:11
You can also take a look at this : http://stackoverflow.com/a/20457076/1811992 — web-tiki, May 30 '14 at 12:20

score 0 · Accepted Answer · answered May 30 '14 at 12:17

0

You can do this :

DEMO

CSS :

#gallery {
    width:100%;
    margin-right:auto;
    margin-left:auto;
    margin-top:45px;
    position:relative;
}
#gallery li {
    list-style-type:none;
    position:relative;
    float:left;
    width:30%;
    margin:1.66%;
}
#gallery ul p {
    position:absolute;
    top:0;
}
#gallery ul img {
    position: relative;
    width: 100%;
    background-position:center center;
    background-repeat:no-repeat;
}

answered May 30 '14 at 12:17

web-tiki

99,765
32
217
249

Same as above, thank you very much this is what I was looking for! – user3661106 May 30 '14 at 12:21

3 x 3 grid, cant place text above each img in ul

1 Answers1