html - CSS 图像缩略图翻转以显示文本

Question

我正在努力实现这一目标:

STEP标志是一个缩略图，旁边的RV标志是一样的，只是悬停在上面，此时VIEW PROJECT和蓝色透视背景出现。

我尝试了一些事情:

使 img 成为 <a> 的背景标记并放置 <p> <a> 中的标签标记并使用 display: none;然后在 :hover更改为 display: block;

这个布局是响应式的，所以导致了问题，我的代码是这样的:

HTML:

<a class="work-thumb" href="#"><p class="work-thumb-rollover">view project</p></a>

CSS:

a.work-thumb {
    width: 20%;
    padding-top: 50%;
    background-image: url(images/work1.jpg);
    background-size: cover;
    -moz-background-size: cover;  /* Firefox 3.6 */
    background-position: center;
}
    /* This code works, the image as the background is responsive */

p.work-thumb-rollover {
    display: none;
}

p.work-thumb-rollover:hover {
    display: block;
    text-align: centre;
    width: 100%;
    background: rgba(54, 25, 25, .5);
}

    /* This doesn't seem to work, the width 100% doesn't take the width of it's parent and on rollover no color appears? */

我还尝试在 HTML 和绝对定位中使用 img 标签:

HTML:

<a class="work-thumb" href="#"><img src="images/work1.jpg" alt="work"><p class="work-thumb-rollover">view project</p></a>

CSS:

.work-thumb {
    position: relative;
}

.work-thumb img {
    width: 33%;
    height: auto;
    float: left;
    padding: 0;
    margin: 0;
    border: 0;
    z-index: 1;
}

p.work-thumb-rollover {
    display: none;
}

p.work-thumb-rollover:hover {
    position: absolute;
    display: block;
    text-align: centre;
    width: 100%;
    background: rgba(54, 25, 25, .5);
    top: 50%;
    left: 50%;        
}

这个，P 标签宽度不会采用它的父标签宽度，并且会固定在框的右上角(无论我给它的 top 或 left 属性是什么)。

我尝试过类似的东西，我已经删除了它们并回到了第一点(除了当时的响应能力之外，只有 html 中的图像没有 CSS)但我尝试了这些变化并且可以不让他们工作。

任何人都可以阐明这一点，或者提供他们可能已经使用或看到的简单解决方案吗？

Answer 1

您只需使用 CSS/3 和 HTML 就可以做到这一点:

Heres an example I made for you

你必须更换

 background-color

与

 background-image

以获得您想要的结果。

编辑:这是一个更新的 JSFiddle Link >>