Not too long ago (at work), I found myself in need of getting photo captions actually on a photo, instead of below or beside the photo (not unlike the way the lead photos are laid out on the Yahoo! Sports homepage). So, I set about tinkering with CSS and semi-transparent PNGs. After throwing out the PNGs (what if I want to change the size of the overlay? I have to make a new graphic? Pass!) and a round or two of code review and updates and then some further tinkering on my own, I've got a pattern!
Brass tacks.
As I said, the PNGs went away quickly when I realized that if I wanted to re-use this code but wanted a differently sized overlay, I'd probably need a graphic. That's just silly! With some cross-browser transparency magic, the overlay can be any size (dimensions) that I want it to be.
div.transparency {background: #000; filter:alpha(opacity=70); opacity: 0.7; -khtml-opacity: 0.7; -moz-opacity:0.7;}
Then, I thought to myself, "Self, what if you want to use a portrait-oriented photo and not landscape? And what if you have more caption on some photos than others?" (She's always being difficult, Self is.)
Defining widths and heights wasn't going to cut it if we're using differently-sized photos and may have different amounts of caption (title, title + description, etc.), so out went the dimensions. Instead, I placed the overlay by using the left and bottom properties (of course, you could use top if you always want it... across the top, but I don't, so there you are).
The overlay,
Monkey wrench.
At this point, I had a pretty good chunk of code working for me. I passed it over to Tom to try out and got more questions in return. What if I want it to align to the right? Does it always have to be the full width? Can it flex depending on the amount of content?
Picky, picky!
As it turns out: it can align to the right; no, it doesn't always have to be full width; and yes it absolutely can flex with the content.
For the width of the overlay, I decided to have the default not full width and offer an additional class to achieve it. Instead, the default is for the width of the overlay to be dependent upon the length of the caption content.
The default alignment of the overlay is also to the right mostly because I was using Tom's homepage as my sandbox. There's an additional class to push it back to the left, not that you couldn't swap the default and modifier if you so wished.
And lastly, there's an additional class to align the caption content to the right. Although, I must tell you, it only seems to work in conjunction with the full-width version.
div.full-width {width: 100%;}
div.caption-left {bottom: 20px; height: auto; left: 0px; margin: 0; padding: 0; position: absolute; right: auto;}
div.text-right {text-align: right;}
Samples of each case of the pattern and the code all put together.
Examples
T Incorporated: Tom's homepage changes dynamically and when there are photos, they use the photo + caption pattern.
Updates
Oh, I'm sure there will be plenty. Please feel free to drop in a comment if you've got suggestions!
Thanks to Tom for beta testing and cheerleading. (:
Brass tacks.
As I said, the PNGs went away quickly when I realized that if I wanted to re-use this code but wanted a differently sized overlay, I'd probably need a graphic. That's just silly! With some cross-browser transparency magic, the overlay can be any size (dimensions) that I want it to be.
div.transparency {background: #000; filter:alpha(opacity=70); opacity: 0.7; -khtml-opacity: 0.7; -moz-opacity:0.7;}
Then, I thought to myself, "Self, what if you want to use a portrait-oriented photo and not landscape? And what if you have more caption on some photos than others?" (She's always being difficult, Self is.)
Defining widths and heights wasn't going to cut it if we're using differently-sized photos and may have different amounts of caption (title, title + description, etc.), so out went the dimensions. Instead, I placed the overlay by using the left and bottom properties (of course, you could use top if you always want it... across the top, but I don't, so there you are).
The overlay,
div.transparency, is empty and placed inside a caption container for 2 reasons. - By not wrapping the caption in
div.transparency, the caption won't inherit the transparency over the overlay. It, the overlay, has a differentz-indexthan the actual caption content so the two don't conflict. - With the overlay inside the caption container and set to full width and height, it takes on whatever dimensions the caption content gives its container. So, it'll flex with its parent. Yay!
div.transparency {background: #000; border: 0; filter:alpha(opacity=70); opacity: 0.7; -khtml-opacity: 0.7; -moz-opacity:0.7; height: 100%; position: absolute; right: 0px; width: 100%; z-index: 2;}
<div class="caption-contain full-width">
<div class="transparency"></div>
<div class="caption">
<p class="title"><a href="link">Link text</a></p>
<p>More info about the photo.</p>
</div><!-- end .caption -->
</div><!-- end .caption-contain -->Monkey wrench.
At this point, I had a pretty good chunk of code working for me. I passed it over to Tom to try out and got more questions in return. What if I want it to align to the right? Does it always have to be the full width? Can it flex depending on the amount of content?
Picky, picky!
As it turns out: it can align to the right; no, it doesn't always have to be full width; and yes it absolutely can flex with the content.
For the width of the overlay, I decided to have the default not full width and offer an additional class to achieve it. Instead, the default is for the width of the overlay to be dependent upon the length of the caption content.
The default alignment of the overlay is also to the right mostly because I was using Tom's homepage as my sandbox. There's an additional class to push it back to the left, not that you couldn't swap the default and modifier if you so wished.
And lastly, there's an additional class to align the caption content to the right. Although, I must tell you, it only seems to work in conjunction with the full-width version.
div.full-width {width: 100%;}
div.caption-left {bottom: 20px; height: auto; left: 0px; margin: 0; padding: 0; position: absolute; right: auto;}
div.text-right {text-align: right;}
Samples of each case of the pattern and the code all put together.
Examples
T Incorporated: Tom's homepage changes dynamically and when there are photos, they use the photo + caption pattern.
Updates
Oh, I'm sure there will be plenty. Please feel free to drop in a comment if you've got suggestions!
Thanks to Tom for beta testing and cheerleading. (:
