0

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

滚下

STEP logo 是一个缩略图，旁边的 RV logo 是一样的，只是它被悬停在上面，此时 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），但我尝试了这些变化，但无法获得它们去工作。

任何人都可以对此有所启发，或者提供他们可能已经使用或看到的简单解决方案吗？

4

3 回答 3

1

您可以只使用 CSS/3 和 HTML 来做到这一点：

这是我为你做的一个例子

你必须更换

 background-color

和

 background-image

得到你所追求的结果。

编辑：继承人更新的 JSFiddle 链接>>

于 2013-02-26T17:53:22.520 回答
0

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

显示：内联块

于 2013-02-26T17:56:00.053 回答
0

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

});
于 2013-02-26T18:02:38.270 回答