CODEWITHSUNDEEP
htmlcsszurb-foundation
toy
toy

Reputation: 12141

How to use CSS to place text on different sizes of images?

I have a bunch of photos with different sizes and I would like to place texts on the left-hand corner and right-hand corner. How do I achieve this?

Here's the example code of what I'm trying to do.

http://jsfiddle.net/noppanit/29pGw/

<div class="content" id="panel_photos">
<p>POPULAR PHOTOS</p>
  <div class="tweet_photo">
    <img src="http://pbs.twimg.com/media/Bh_YPrmIMAAsiYE.jpg" />
    <span class="twitter_name">@twitter_name</span>
              <span class="someother">something_cool</span>
  </div>
  <div class="tweet_photo">
    <img src="http://pbs.twimg.com/media/Bh-tD9iIUAAHU8-.jpg" />
    <span class="twitter_name">@twitter_name</span>
    <span class="someother">something_cool</span>
  </div>
  <div class="tweet_photo">
    <img src="http://pbs.twimg.com/media/Bh7CEUwCcAAmy2C.jpg" />
    <span class="twitter_name">@twitter_name</span>
              <span class="someother">something_cool</span>
  </div>
  <div class="tweet_photo">
    <img src="http://pbs.twimg.com/media/Bh6BqxkIIAAz0i4.jpg" />
    <span class="twitter_name">@twitter_name</span>
              <span class="someother">something_cool</span>
  </div>
  <div class="tweet_photo">
    <img src="http://pbs.twimg.com/media/Bh5cDniIgAAhhsh.jpg" />
    <span class="twitter_name">@twitter_name</span>
              <span class="someother">something_cool</span>
  </div>
  <div class="tweet_photo">
    <img src="http://pbs.twimg.com/media/Bh4idriCEAAIa2C.jpg" />
    <span class="twitter_name">@twitter_name</span>
              <span class="someother">something_cool</span>
  </div>
</div>

Upvotes: 1

Views: 91

Answers (1)

Hashem Qolami
Hashem Qolami

Reputation: 99484

<div> elements are block-level which fill the entire space of their containing block. You could float divs and then clear the float for each one to decrease the width of them up to their content as well as keep each one in a separate row.

Then simply use bottom/left and right properties to position the absolutely positioned elements within their containing block (the relatively positioned parent .tweet_photo) as follows:

.tweet_photo {
    position: relative;
    float: left;
    clear: left;
}

.twitter_name {
    position: absolute;
    color: white;
    bottom: 20px;
    left: 20px;
}

.someother {
    position: absolute;
    right: 20px;
    bottom: 20px;
    color: white;
}

WORKING DEMO.

Upvotes: 4

Related Questions