CODEWITHSUNDEEP
htmlcsslistcss-floatcss-position
TTT
TTT

Reputation: 1885

Text over floating image list items using HTML and CSS?

I want to have a list (ul/li) of items floating left. Each item should contain an image (img tag, no css background.) I want a text to be displayed over those images.

So far, in my current test version, this text is display near the left border of the page, not of the image.

Here my current test code

<!DOCTYPE html>
<html>

<head>
  <style>
    <!-- I know that classes like list and listItem may seem redundant with tags but classes will be useful in final context. --> .list {
      list-style-type: none
    }
    .list .listItem {
      float: left;
      display: inline;
      margin: 0 5px 0 5px
    }
    .listItem img {
      z-index: 3
    }
    .listItem .title {
      position: absolute;
      left: 0;
      width: 100%;
      color: #f00;
      margin: 5px;
    }
  </style>
</head>

<body>
  <ul class="list">
    <li class="listItem">
      <img src="https://lh3.googleusercontent.com/mCVsAtG1EpSwbaGIkSo1v2WFkwKG_khaAz0iP9F3uuDkxzfYarKAfIIJVuq0FfiC7gCLu5cP=s640-h400-e365" alt="" />
      <span class="title">Test text, test text</span>
    </li>
    <li class="listItem">
      <img src="https://lh3.googleusercontent.com/mCVsAtG1EpSwbaGIkSo1v2WFkwKG_khaAz0iP9F3uuDkxzfYarKAfIIJVuq0FfiC7gCLu5cP=s640-h400-e365" alt="" />
      <span class="title">Test text, test text</span>
    </li>
    <li class="listItem">
      <img src="https://lh3.googleusercontent.com/mCVsAtG1EpSwbaGIkSo1v2WFkwKG_khaAz0iP9F3uuDkxzfYarKAfIIJVuq0FfiC7gCLu5cP=s640-h400-e365" alt="" />
      <span class="title">Test text, test text</span>
    </li>
  </ul>
</body>

</html>

And here is a js fiddle: https://jsfiddle.net/24u81rgn/2/

Upvotes: 1

Views: 82

Answers (1)

kukkuz
kukkuz

Reputation: 42352

I guess you forgot to put position: relative to listItem and top:0 for title.

Let me know your feedback, cheers!

.list {
  list-style-type: none
}
.list .listItem {
  float: left;
  display: inline;
  margin: 0 5px 0 5px;
  position:relative;
}
.listItem img {
  z-index: 3;
}
.listItem .title {
  position: absolute;
  left: 0;
  top:0;
  width: 100%;
  color: #f00;
  margin: 5px;
}
<body>
  <ul class="list">
    <li class="listItem">
      <img src="https://lh3.googleusercontent.com/mCVsAtG1EpSwbaGIkSo1v2WFkwKG_khaAz0iP9F3uuDkxzfYarKAfIIJVuq0FfiC7gCLu5cP=s640-h400-e365" alt="" />
      <span class="title">Test text, test text</span>
    </li>
    <li class="listItem">
      <img src="https://lh3.googleusercontent.com/mCVsAtG1EpSwbaGIkSo1v2WFkwKG_khaAz0iP9F3uuDkxzfYarKAfIIJVuq0FfiC7gCLu5cP=s640-h400-e365" alt="" />
      <span class="title">Test text, test text</span>
    </li>
    <li class="listItem">
      <img src="https://lh3.googleusercontent.com/mCVsAtG1EpSwbaGIkSo1v2WFkwKG_khaAz0iP9F3uuDkxzfYarKAfIIJVuq0FfiC7gCLu5cP=s640-h400-e365" alt="" />
      <span class="title">Test text, test text</span>
    </li>
  </ul>
</body>

Upvotes: 1

Related Questions