If you’re like me, sometimes you just want to add some quick CSS code to a post without having to dig through a child theme’s monster-sized style.css file, which is often buried under a ton of subdirectories on some ancient FTP server. (That’s on a good day, when the oddball “grid” framework isn’t conflicting with a weird proprietary WYSIWYG framework.)

So here you go, you can achieve this caption effect on your photos with some basic math.

In this example, there’s 195 pixels between the top of the photo and the 34 pixel-high caption: 195 + 34 = 229 pixels (height of the photo)



Notice the CSS code is all smashed together. Otherwise the WordPress text editor adds extra codes that break everything. NEVER use the WordPress “Visual” editor on inline code. Or it will be destroyed.

Some of you might be thinking: But there’s a better way! Yes, I know. Like I said, sometimes you just need a quick effect and inline CSS is perfect for that. With inline CSS you’re less concerned about conflicts. The last CSS rule counts the most, which is probably your inline rule. (Which CSS framework loaded first, which loaded last?!) You don’t have to go looking all over the place for inline CSS (wild-goose chase) because it’s right there in your face should the time come to make a change. If I find myself using this effect over and over again, I might build a cool jQuery function that does the math to build the caption automatically. But I digress.

Back to the example: The tricky part is making sure your math adds up and you’ll have to eyeball all the dimensions. Think design principles: balance, visual tension, visual weight. Then there’s contrast and readability. It helps if you have an artistic eye.

This particular example is not “responsive” and we’re assuming the blog post content container has a “min-width” of 500 pixels. Otherwise the photo could get clipped. We could do a responsive photo with a responsive caption but that’s another blog post for another day ;-)

PS: If you want to buy the house, I’m in the process of adding more information here: http://warnercustomhomes.com/hardwood-cove/