在绝对位置的图像上保留文本 [英] Hovered text on image with absolute position

问题描述

>

图片你可以看到3张图片，我想让他们与文本悬停。
我在所有这些CSS东西很新。在你悬停三个图像文本之一后，我的问题是，我试过很多事情，也许失败在绝对位置？

On image you can see 3 pictures, i want them to be hovered with text. I'm pretty new in all of this CSS thingies. After you hover on 1 of three image text will appear, my problem is that i tried many thing, maybefault lays in position absolute?

HTML：

<div id="imgBackground"></div>
<div id="imgContainer">
    <img src="images/coffee_01.jpg" />
    <img src="images/coffee_02.jpg" />
    <img src="images/coffee_03.jpg" />
</div>

CSS：

#imgBackground {
    position: absolute;
    width: 100%;
    height: 300px;
    background-color: rgb(244,244,244); }

#imgContainer {
    position: relative;
    margin: auto;
    width: 980px;
    padding: 30px; }

#imgContainer img {
        margin: 0px 14px 0px 14px;
        width: 295px;
        height: 254px;    }

推荐答案

许多。

正如你在这段代码中看到的，我试图划分一点，我需要，但注意和移动你的鼠标在白色空间的行李，它还徘徊。如何解决这个问题？

As you see in this code i tried to scretch a bit what i need, but take attention and move your mouse under the imgage on white space, it also hovering. How to fix this problem?

#wrapper .text {
position:relative;
bottom:221px;
left:0px;
width: 300px;
height: 200px;
background: rgba(0,0,0, .4);
text-align: center;
text-height: 50px;
visibility:hidden;
}

#wrapper:hover .text {
visibility:visible;
}

这是我的更新：

http://jsfiddle.net/D5UEW/2/

我认为这可能会导致它，任何想法？

I think this might cause it, any ideas ?

@edit

此代码从我的页面：

.imgContainer {
    position: relative;
    margin: auto;
    width: 295px;
    height: 254px;
    padding: 30px;
    float: left;
}

.imgWrapper .text {
    position:relative;
    bottom:274px;
    top: 10px;
    width: 295px;
    height: 254px;
    background: rgba(0,0,0, .4);
    text-align: center;
    visibility:hidden;
}

.imgWrapper:hover .text {
visibility:visible;
}

在我的页面上的结果：

And result on my page:

这篇关于在绝对位置的图像上保留文本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！