CSS Caption image AAARG

[tooth-paste]

Hope anyone can help with a none PW related issue. I thought this was going to be simple but in the mean time I'am pulling my hairs out.

I want to place text over an image. This I got working. See the included image and css. The problem is that I want the text to underline on mouse over.

<div class="image">
<img src="<?php echo $config->urls->templates; ?>img/image.jpg" alt="" />
<h2><span>Test</span></h2>
</div>

.image{position: relative;width:100%}
h2, .caption{position:absolute;top:0;left:3%;width:100%}
h2 span{font-size:15px;font-weight:normal;color:#fff;letter-spacing:-1px;background:rgb(0, 0, 0);background:rgba(0, 0, 0, 0.7);padding:2%}

[BitPoet]

That is what the :hover pseudo class is for.

span.caption:hover { text-decoration: underline; }

[tooth-paste]

Adding the caption messes up the design. Did you mean like this

<h2><span class="caption">Test</span></h2>

[BitPoet]

Sorry, didn't look closely enough. I meant

h2 span:hover { text-decoration: underline; }

Though for that kind of styling you should always use classes or ids to avoid styling unrelated content. I'm assuming here that you want the text to underline when you hover over it. If you want to style the text on hovering over the image, it's a completely different topic.