Image Caption Placement & Styling

[GrondinDesigns]

I would like all image captions to be:

• overlayed atop the image
• in the top-right corner
• right aligned
• in a textbox apoximatley 40% of the image width
• padded aproximatley 5% from image edges
• with a drop shadow
• Posible image darken on hover (but not neccesary)

I would like to do this to base image elements using css, not just using gallery and/or slideshows. You can see the desired effect on the second image, which is raterized text via graphics software. While the first image displays the current theme layout for captions.

grondindesigns.weebly.com

I appreciate the help, as I've been at this for hours with close, but not perfect results.

[Bernadette3]

Is there a reason you don't want to just edit the images (like the second one) first? It looks like you were able to accomplish what you needed already, but I'm not sure if you had a different reason in mind. 

[GrondinDesigns]

Mostly that by doing that the text can not be changed dynamically based on screen size. But also the text is also then not indexed by search engines. It's just all around a cleaner expeirence to have captions rather than rasterized text. I'd like to build the site as dynamically as possible from the get go.

For myself it's not a huge issue, but for conviencing clients that they won't need assistance after the fact it becomes a problem.