Html CSS图像缩略图滚动显示文本

我正在努力做到这一点：

STEP徽标是一个缩略图，其旁边的RV徽标是相同的，只是它被悬停在该点视图项目上，并显示蓝色透明背景

我尝试了几件事：

将img作为

标签的背景，并在

标签中放置

标签，并使用

显示：无然后打开
：悬停
更改为
显示：块

这个布局是响应性的，因此导致了问题，我的代码是这样的：

HTML:

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

HTML:

这一个，p标签的宽度不会与其父标签的宽度相同，而是会固定在框的右上角（无论我给它指定了什么
top
或
left
属性）

我尝试过类似的事情，我删除了它们，回到了第一步（只是在html中有图像，没有CSS，除了当时的响应性），但我尝试了这些变化，只是无法让它们工作

任何人都可以对此有所了解，或者提供他们可能已经使用或见过的简单解决方案吗？
您只需使用CSS/3和HTML即可：


你得换个新的

 background-color

与

为了得到你想要的结果

编辑：这里有一个更新的JSFIDLE
您可以将锚定标记转换为具有特定宽度和高度的div，并在上悬停：您可以更改背景图像。必须为div设置样式

显示：内联块

如果我正确理解您的问题，您希望显示文本并更改悬停时的背景图像。为什么不使用一点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');

});


$（'.work thumb'）。悬停（函数（）{
$（'.work thumb rollover'）.text（'view project'）；
$（'.workthumb>img'）.attr（'src'，'images/work2.jpg'）；
});
这些“工作缩略图”的图像不是我的作品，只是为了记录在案。我刚刚从一个网站上截取了它。感谢您的关注-这几乎就是我想要的，只是我希望仍然能够在
悬停
上看到原始背景图像。你知道我怎样才能做到吗？当然！只需将图像放在div中，并对其进行样式设置，使其居中即可。我的朋友，你太棒了。非常感谢！我欠你一杯啤酒。几乎，我希望背景图像始终保持不变，因此在我的图片中，RV将只是图像，然后悬停时，“视图项目”和放大镜几乎覆盖在背景图像上，当你不再悬停时消失。有什么想法吗？我不能使用特定的宽度和高度，因为设计是流动的，宽度都是用百分比计算的，还有其他想法吗？
<a class="work-thumb" href="#"><img src="images/work1.jpg" alt="work"><p class="work-thumb-rollover">view project</p></a>

.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%;        
}

 background-color

 background-image

<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');

});