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 >>

Answer 2

您可以将锚标记转换为特定宽度和高度的div，并在：hover 上将更改背景图像。必须设置div的样式

  

显示：内联块

Answer 3

如果我正确理解您的问题，您希望显示文字并在悬停时更改背景图片。为什么不使用一点jquery来完成它：

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

$('.work-thumb').hover( function() {

$('.work-thumb-rollover').text('view project');
$('.work-thumb > img').attr('src', 'images/work2.jpg');

});