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>

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

3 个答案: