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.
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:
The CSS:
(I'll comment explanations on pertinent lines)
.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.
-
.image-unit .image {
-
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. */
-
height:83px;
-
width:125px;
-
/* These dimensions are the same as your image's preset sizing convention. */
-
}
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.
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.
If you notice any errors, amendments, or improvements, please leave a comment for the betterment of web development.
Popularity: 33% [?]
February 6th, 2007 at 9:54 am
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.
February 7th, 2007 at 9:10 am
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.
February 7th, 2007 at 5:30 pm
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!
November 7th, 2008 at 4:29 am
[...] Images with caption overlays - A simple and cool effect that can be implemented with a basic knowledge of CSS. [...]
January 20th, 2009 at 10:56 am
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