html - HTML / CSS 图像缩略图翻转

Question

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

我一直在玩小提琴，基本上我想要这个..

左边是非悬停状态，然后是悬停状态，我想要蓝色叠加层和文本“查看项目”。

这是我正在玩的小提琴，我唯一无法展示的是文字。

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，而不是锚本身：

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

请参阅更新的 jsFiddle。

Answer 2

您还可以使用同级选择器+来显示文本，因为它是隐藏的。

Demo

.work-thumb img:hover + .roll-text {
    display:block;
}