Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home › Forums › CSS › Text On Top of Each Image in List

  • This topic is empty.
Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • February 23, 2013 at 7:10 pm #42937
    rhoff37
    Member

    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 #125769
    chrisburton
    Participant

    You can still do that by setting the `

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

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 #125772
chrisburton
Participant

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

February 23, 2013 at 8:36 pm #125773
rhoff37
Member

This great, thanks for your help!

  • Author
    Posts
    • Viewing 5 posts - 1 through 5 (of 5 total)
    • The forum ‘CSS’ is closed to new topics and replies.