纯css如何能实现鼠标移入图片变为文字

Question

请问可以用纯css实现这种鼠标移入图片变为文字的效果吗

Answer 1

// html
<div>
    <img />
    <span>列表</span>
</div>

// css
div span{
    display: none;
}

div:hover span{
    display: block;
}
div:hover img{
    display: none;
}

伪类也是一样，其它的还有opticity透明度变化、css3 位移等。