HTML / CSS图像缩略图翻转

Question

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

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

左边是非徘徊状态，然后ON HOVER我想要蓝色叠加层和文本'View Project'。

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

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>必须有回应。所以'view project'也必须是响应式的（不能使用固定的像素宽度）。

任何帮助都会受到大力赞赏。感谢

Answer 1

您需要在悬停在div元素上时激活文本，而不是锚点本身：

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

请参阅updated jsFiddle。

Answer 2

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

Demo

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