In Part 1, we looked at adding captions to your posts using an image editor, such as Photoshop. This method can produce great results, but in the comments John said something that would work better would be to do this via CSS. Whilst you lose the liberty of choosing a wild font, this is much easier to do if you are going to do this a lot of the time.
So, with ease of use in mind, I’m proud to present CSS image caption! I actually took the code from Chris Coyier’s featured content slider, and just stripped it down so you’re left with the image and a caption.
Click here to see the actual working example, and not just a picture!
Its not ideal as you’ll have to create a new div if you have two images that are different sizes, but if you keep your images all the same size then this is the one for you!
The CSS. The transparent black background is just an image thats repeated. The height will change the height of the box, but you’ll have to fiddle with some of the other parameters in order to get the box finishing at the bottom of the image. I wouldn’t advise it unless you know what you’re doing.
#transparentbox{
background: url(images/transpBlack.png);
padding: 10px;
height: 30px;
margin-top:-50px;
position: relative;
z-index: 9999;
color: white;
width:500px;
}
The HTML. Quite simple – you’ve just got to add in an extra div after your image, and put the caption in that div.
<img src="images/yourimage.jpg" alt="My image" />
<div id="transparentbox">
Wow! This actually works!<br />
<a href="http://nometet.com">by Alex Denning</a>
</div>
The integration. Quite simple to integrate, so I’ll gloss over this. Copy and paste the CSS into your theme’s stylesheet, and upload the transparent black image (we’re using an image as it works with more browsers than the CSS/HTML option). Then when you’re putting images into posts, add in the extra div and bingo! Make sure you’ve set the width correctly otherwise it’ll spill over the sides.
Disclaimer: This code has been tested under Linux and Firefox and is provided ‘as is’.
This was written by Alex Denning, Wordpress power user, web design freelancer and editor of Nometet.com. He is on Twitter, so why not follow him?
My name is Jean-Baptiste Jung and I'm the man behind Cats Who Code. I started to use the Internet back in 1998 and started to create websites three years laters in 2001.
17 Comments
Now this is much better solution… But with fixed width it will be definitely be hard to implement for different image sizes. Waiting for the part 3
… Thanks for this tutorial anyway!
I agree that this is a much better solution but I’ll also await part three where I hope we’ll see a solution that can be used with ease for pictures no matter their size an shape
a nice little trick and clean, it does also work and serve as a watermark.
Just stumbled upon your site.
If you want to have the possibility to have images in other sizes, you can do it like this:
a) A wrapping div (around image and div)
b) Remove width from the css
c) Add the width of the image to the first div
–
Example (HTML):
Wow! This actually works!
by Alex Denning
So now you don’t have to make two or three IDs – but you have to make a wrapping div and add the width. Everytime.
@ Josso – whilst that would work, you’re still left with the problem that you have to create the wrapping div for each image size!
This is one of those items that I will remember to try when it fits in with what I am doing. It comes out looking quite clean, and any use of transparency tends to add another aspect to an image or program.
@Alex,
You just got a new follower on twitter! Thanks for a great post
Hey Alex
Thanks for the code. This is just perfectly what I’ve been looking for. Though I need to tweak the CSS margin a little bit. Hey, it actually works.
Here’s the example
Interview with Jim Regan – The Net Fool
Yan
@Richard – thanks!
@Yan – good to know someone’s put it to good use!
Awesome post. Thanks for all the tips and information. This is definitely something that will help me.
~ Tim
How about making a screenshot capture image for template or theme we create? I mean, sometime I make screenshoot for my theme/template with photoshop by copying from ‘print screen Sys Rq’ menu on full screen show of my theme. And it results small image, not detil. How can I make detil image for screenshot? This article relates with I mean, but still don’t know how to create the best screenshot image. I’m waiting your answer please, thanks.
@Evyta – if I’m understanding you right, you want something like the Screengrab! plugin for Firefox. You can install it here: https://addons.mozilla.org/en-US/firefox/addon/1146
@Alex – Yes, something like that. Thank you very much for your help. It’s better than before.
Great post, I especially found it useful where did you stated….
This looks really cool. I’ve been struggling with ways to make images appear nicely on my blog and I think the captions add a lot of style to them. Placing the caption on the image gives a very web 2.0 appearance and the fact that it’s now done using css makes the implementation a lot easier.
Great post!
Images are essential to an attractive niche blog. It gives the site a professional feel to it
Thanks for this tutorial, It comes out looking quite clean, and any use of transparency tends to add another aspect to an image or program.