Images with caption overlays

CSS,Web Dev 5 February 2007 | 7 Comments

I was admiring the CSS for the section headings on BuzzFeed, although I do not necessarily love the content of the site (no offense, just not my thing).
View it in action.
Overlay
The method to overlay the captions is alarmingly simple. Essentially, the image and caption are contained in a div, and corresponding classes are applied to the nested elements. The caption has styling featuring a negative margin-top to pull the caption up, thus making an overlay. BuzzFeed overkills the divs and puts the caption and image in their own subsequent nested divs when they could merely apply classes to the corresponding < a > tags. I will explain my modified method.

The HTML:


HTML:
  1. <div class="image-unit">
  2.    <a class="image" href="#">
  3.       <img width="125" height="127" alt="Yum!" src="http://blog.neatlysliced.com/orangeslice.jpg" />
  4.    </a>
  5.    <a class="num-links" href="#">9 Links</a>
  6. </div>

The CSS:

(I'll comment explanations on pertinent lines)

CSS:
  1. .image-unit {
  2. float:left; /* necessary if you wish to have text wrap along the right of this caption/image block */
  3. width:125px; /* set to the width of the image, or greater. This implies that you will have a consistent sizing convention for these images. */
  4. }


.image-unit is your block that contains both the image and the caption.

The .image class is applied to the link that wraps around the image.

CSS:
  1. .image-unit .image {
  2. display:block; /* anchor tags are naturally displayed inline. This style is required in order for it to behave as a block, like an image or a div. */
  3. height:83px;
  4. width:125px;
  5. /* These dimensions are the same as your image's preset sizing convention. */
  6. }


a.num-links refers to the link that contains the caption overlay. The link should match whatever link the image has, so that the whole block functions as one linking entity.

CSS:
  1. .image-unit a.num-links {
  2. background-color:#999; /* This is the background color of the caption strip */
  3. color:#fff; /* font-color */
  4. margin-top:-15px; /* This pulls the caption up. If you apply position:relative to .image-unit and .image, you can see the effects of this margin-top are more evident.
  5. padding:1px 0 0px 5px;
  6. position:absolute; /* pulls the caption out of the document flow, and allows your element to be re-positioned with regard to its parent box (in this case, .image-unit)
  7. width:120px; /* again, a variant dimension based off of the width of the image */
  8. }
  9. .image-unit a.num-links:hover{
  10. background-color:#fff;
  11. color:#999;
  12. }


A cool-looking effect that it not very difficult to pull off. I often wish that more designers knew the capabilities of CSS so that they could incorporate these cool, simple effects in their designs.

View it in action.

If you notice any errors, amendments, or improvements, please leave a comment for the betterment of web development.

Share and Enjoy:
  • del.icio.us
  • Digg
  • Twitter
  • Google Bookmarks
  • StumbleUpon
  • Facebook
  • email
  • Print

7 Responses on “Images with caption overlays”

  1. I think a lot of the neat Web 2.0 traits in sites are designers simply getting adept at applying some of these simple CSS attributes in creative ways. Nice post.

    p.s. I see you figured out how to trick WP to not render your HTML. I just figured that out not long ago. It was driving me crazy. :-) The WYSIWYG editor I use at work (ActivEdit) is smart enough to know that when you use less-than and greater-than signs in WYSIWYG mode, that you actually want them to render like that, so I never had to deal with that problem until WP.

  2. Thanks for the writeup! You're absolutely right about the superfluous divs. Those are the kinds of things that creep in during the design and development process and that's why I always try to go back after launch and re-factor by removing unnecessary markup, finding ways to reuse the same classes more, etc. It makes the code much more maintainable going forward. Thanks for helping me find that one.

  3. Jennifer says:

    Hey thanks for the comment, Chris. That's why web dev is great, someone can look at your code with fresh eyes and offer improvements. Thank YOU for coming up with the concept to start with!

  4. very cool - this is a really nice effect. thanks.

    yah i agree the lots of designers do not seem to see the power in css and use all sorts of superfluous nonsense.

    J

  5. I’m not that much of a online reader to be honest but your sites really nice, keep it up! I'll go ahead and bookmark your site to come back in the future. All the best

Trackbacks/Pingbacks

  1. [...] Images with caption overlays - A simple and cool effect that can be implemented with a basic knowledge of CSS. [...]

  2. [...] Images with caption overlays - A simple and cool effect that can be implemented with a basic knowledge of CSS.   If you enjoyed this article, please consider sharing it! [...]

Leave a Reply