css – 将鼠标悬停在某个图像上后,如何显示具有特定ID的文本

<div class="column">
<img src="images/picture.jpg" id="first" title="firstpic">
<span id="firstspan">This is what should appear when hovering over first image</span>
</div>

现在,我如何做到这样,当有人在“第一”图像上盘旋时,“第一次”才出现？这是我为css尝试的.

#firstspan {
    display: none;
}

#first:hover #firstspan {
    display: block;
}

但这似乎不起作用.什么是错的？

另外,有没有办法让#first定位在底部的图像内？而不是外面的形象？

img#first:hover ~ #firstspan {
    display: block;
}

DEMO.