将鼠标悬停在图像上时显示文本

Question

我正在尝试为我的网站设计一些样式。它超级简单，但我已经尝试了几个小时，但无法让它工作。预览在这里：http://efthemespage02.tumblr.com/ 当您将鼠标悬停在图像 (gif) 上时，我想做的是显示一个标题（背景中的图像不透明）。这是我现在的编码。

样式/css：

#wow {
    margin-top:105px;
    margin-left: 320px;
    -webkit-transition: opacity 0.8s ease-in-out;
    -moz-transition: opacity 0.8s ease-in-out;
    -o-transition: opacity 0.8s ease-in-out;
    -ms-transition: opacity 0.8s ease-in-out;
    transition: opacity 0.8s ease-in-out;
    }

    #wow img {
    opacity:1;
    width:560px;
    height:auto;
    padding:5px;
    border: 1px solid #bbb8b8;
    }

    #wow img:hover {
        opacity: 0.4;
         -webkit-transition: opacity 0.4s ease-in-out;
    -moz-transition: opacity 0.4s ease-in-out;
    -o-transition: opacity 0.4s ease-in-out;
    -ms-transition: opacity 0.4s ease-in-out;
    transition: opacity 0.4s ease-in-out;
    }

实际的html：

<div id="wow""><img src=""http://media.tumblr.com/30ad609089a2d306c77f3de99a184a4c/tumblr_inline_mpq7oro2491qz4rgp.gif"></div>

好吧，基本上我不知道自己在做什么。我已经尝试使用所有可用的在线资源来尝试找出答案，但没有任何效果。感谢您的帮助！

Answer 1

只需在您的 HTML 中进行一些更改，以包含您的文本，如下所示：

<div class="wow">
    <img src="http://media.tumblr.com/30ad609089a2d306c77f3de99a184a4c/tumblr_inline_mpq7oro2491qz4rgp.gif" alt="" />
    <div class="overlay">This is some text</div>
</div>

然后在你的 CSS 中，因为你的示例网站需要使用固定宽度，它会简化一切，所以让我们用一些非常直接的东西，只是一些定位和悬停状态，没什么花哨的。唯一重要的是我去掉了 ID 并用类替换了它们，这样你就可以在需要时重新使用样式，而不是在图像上设置悬停状态的样式，我添加了一个 .overlay 类，它包含文本并具有背景、大小、块属性等，更易于操作。见以下代码：

.wow {
    position:relative;
    width:560px;
    height:310px;
    -webkit-transition: opacity 0.8s ease-in-out;
    -moz-transition: opacity 0.8s ease-in-out;
    -o-transition: opacity 0.8s ease-in-out;
    -ms-transition: opacity 0.8s ease-in-out;
    transition: opacity 0.8s ease-in-out;
}
.wow img {
    position:relative;
    top:0;
    left:0;
    z-index:1
}
.overlay {
    position:absolute;
    width:100%;
    height:100%;
    top:0;
    left:0;
    z-index:2;
    opacity:0;
    -webkit-transition: opacity 0.4s ease-in-out;
    -moz-transition: opacity 0.4s ease-in-out;
    -o-transition: opacity 0.4s ease-in-out;
    -ms-transition: opacity 0.4s ease-in-out;
    transition: opacity 0.4s ease-in-out;
}
.wow:hover > .overlay {
    opacity:1;
    width:560px;
    height:310px height:auto;
    padding:5px;
    display:block;
    background:rgba(255, 255, 255, 0.4)
}

你会注意到我或多或少地使用了你的样式，所以你并没有那么远

你可以see a fiddle here

Answer 2

你可以在你的代码中省略它

#wow img:hover {
    opacity: 0.4;
    -webkit-transition: opacity 0.4s ease-in-out;
    -moz-transition: opacity 0.4s ease-in-out;
    -o-transition: opacity 0.4s ease-in-out;
    -ms-transition: opacity 0.4s ease-in-out;
    transition: opacity 0.4s ease-in-out;
}

并使用 z-index:2 在其上设置新图像。然后更改位于原始图像顶部的新图像的不透明度。

Click here to see an example fiddle

html:

    <div id="wow">
         <img src="http://media.tumblr.com/30ad609089a2d306c77f3de99a184a4c/tumblr_inline_mpq7oro2491qz4rgp.gif">
    <div class="newImage">
         <img src="http://media.tumblr.com/30ad609089a2d306c77f3de99a184a4c/tumblr_inline_mpq7oro2491qz4rgp.gif">
    </div>
    </div>

css:

#wow img {
    position:relative;
    top:0;
    left:0;
    z-index:1 /*bottom level*/
}
.newImage {
    position:absolute;
    top:0;
    left:0;
    z-index:2; /*top level*/
    opacity:0; /*hidden in normal state*/
}
#wow:hover > .newImage{
    opacity:1; /*visible in hover state*/
}

Answer 3

试试这个 css

    .txtOverlay{
        margin-top:105px;
        margin-left: 320px;
        width:560px;
        opacity:0.9;
        font-size:20px;
        font-weight:700;
        text-align:justify;
        border: 1px solid #bbb8b8;
        padding:5px;
        background: url(image url) no-repeat;
     }
     .theText{
        opacity:0;
      }
    .txtOverlay:hover .theText
    {
        opacity:0.9;
        color:#FFFFFF;
        font-size:20px;
    }

html

 <div class="txtOverlay">
    <div class="theText">
     <!--text here-->
    </div>
  </div>