Grow your CSS skills. Land your dream job.

Text On Top of Each Image in List

  • # February 23, 2013 at 7:10 pm

    I have an unordered list in which each li contains a different image. I am looking to place text on top of each of the images while keeping the list construct intact. I can only find solutions which involve putting the image in a div followed by a p tag and then styling accordingly…I want to keep the images in list form as I have them displayed in rows of two on the page.

    Any help is very much appreciated!

    # February 23, 2013 at 7:20 pm

    You can still do that by setting the `

  • ` to inline-block: http://codepen.io/chrisburton/pen/bvnlt
# February 23, 2013 at 7:23 pm

Sorry! I phrased that incorrectly…I want the text to appear overlayed on the image, as in an image with text in the middle of the image

# February 23, 2013 at 7:54 pm

@rhoff37 Like this? http://codepen.io/chrisburton/pen/dCyBf

# February 23, 2013 at 8:36 pm

This great, thanks for your help!

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".