将文字悬停在图像上时显示文字

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

您会注意到我正在使用或多或少使用您的样式，所以您离您并不远

你可以在这里看到一个小提琴

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在其上设置新图像。 然后，您可以更改位于原始图像顶部的新图像的不透明度。

单击此处查看小提琴示例

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