CODEWITHSUNDEEP
csstwitter-bootstrap
Richlewis
Richlewis

Reputation: 15374

Place text within padding space

i am creating images with a polaroid like effect using padding around the image and setting the background colour to white

 img.team {
background: none repeat scroll 0 0 white;
box-shadow: 0 9px 25px -5px #000000;
display: block;
margin-left: auto;
margin-right: auto;
max-width: 100%;
padding: 12px 12px 50px;

}

what I would like to do is write a caption within the space under the image and between padding, kind of like if i had wrote on it with a felt pen. Im using bootstraps thumbnails as my images.

I have tried a negative margin on the h5

 h5 {
color: #333333;
font-size: 1.1em;
margin-top: -35px;
text-align: center;

}

HTML is

      <div class="container">
      <div class="row">
      <div class="span4">
        <div class="thumbnail">
         <img class="team"  src="http://placehold.it/160x120"  title="Swimming" alt="Swimming" ></a>

            <h5>Swimming</h5>



   </div><!--End of thumbnail-->
</div><!--End of span4-->

however when i place another row of polaroids underneath they overlap the top ones because of this margin.

has anyone done anything like this before? any help appreciated

Upvotes: 0

Views: 376

Answers (1)

Bojangles
Bojangles

Reputation: 101483

Instead of styling the <img>, style div.thumbnail instead:

<div class="thumbnail">
    <img class="team"  src="http://placehold.it/160x120"  title="Swimming" alt="Swimming" ></a>

    <h5>Swimming</h5>
</div>

CSS:

div.thumbnail {
    background: none repeat scroll 0 0 white;
    box-shadow: 0 9px 25px -5px #000000;
    padding: 12px;
    display: inline-block;
}

Here is a demo for you. Note that you should remove the negative margin from the <h5> too.

Upvotes: 1

Related Questions