HTML/CSS 图像缩略图翻转

Question

我昨天在这里问了一个关于这个解决方案的问题，我以为我已经解决了它并将答案标记为正确，但现在我意识到它不太正确。

我一直在玩 fiddle ，基本上我想要这个..

左边是非悬停状态，然后是悬停状态，我想要蓝色覆盖和文本“查看元素”。

这是我正在玩的 fiddle ，唯一无法显示的是文字。

jsFiddle

<div class="cont">

<div class="work-thumb"><img src="http://www.menshealth.co.uk/cm/menshealthuk/images/qQ/mh-face-off-winner-MED-07032011.jpg" /><a class="roll-text">View</a></div>

有几点需要注意... <img>必须有反应。所以“查看元素”也必须是响应式的(不能使用固定的像素宽度)。

如有任何帮助，我们将不胜感激。谢谢

Answer 1

悬停在 div 元素上时需要激活文本，而不是 anchor 本身:

.work-thumb:hover a.roll-text {
    display: inline-block;
    position: absolute;
    top: 20px;
    left: 10px;
    text-align: center;
    color: #fff;
}

请参阅updated jsFiddle .