I had the same issue. Here is what I did and other things you can do to get different designs.
Add the styles below to your stylesheet, this will move the text up a little so that it covers the very bottom edge of the image, with a semi-transparent background and darker text.
padding: 4px 0;
For a more transparent look, you could make the text color completely black (#000000) and lower the opacity to maybe 0.7 or even 0.6. This also affects the text transparency so any lower starts to make it too hard to read.
If you want to go completely transparent, remove the background-color and opacity setting, and I would suggest adding a white text-shadow, something like "text-shadow: 1px 1px 1px #ffffff;" (adjust the px to get different shadow position and blur).
To put the text across the top instead of the bottom, replace "bottom: 28px;" with "top: 0;" and add "height: 12px;".
For long text that wraps to two (or more) lines, adjust the bottom position higher or height higher by 16 for each additional line (two lines = 28px), and add "line-height: 14px;".
You can adjust the height, line-height, and padding to get more or less spacing around the line(s) of text, something like "padding: 6px 0; height: 14px; line-height: 16px;" might look good.
Of course, there might be some differences depending on your theme too, so keep adjusting until you get it like you want.