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

I'm trying to style something for my website. It's super simple, yet I've tried for hours and can't get it to work. The preview is here: http://efthemespage02.tumblr.com/ and what I want to do is make a title appear (with the image opaque in the background) when you hover over the image (gif). Here is the coding I have right now.

我正试图为我的网站设计一些东西。这是非常简单的,但我已经尝试了几个小时,无法让它工作。预览在这里:http://efthemespage02.tumblr.com/我想要做的是当你将鼠标悬停在图像(gif)上时出现标题(背景中的图像不透明)。这是我现在的编码。

style/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;
    }

actual html:

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

Ok so basically I don't know what I'm doing. I've tried using every available online source to try and figure it out but nothing has worked. Thanks for your help!

好吧基本上我不知道我在做什么。我已经尝试使用所有可用的在线资源来尝试找出来,但没有任何效果。谢谢你的帮助!

3 个解决方案

#1

Just make a little change in your HTML to include your text like this:

只需对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>

and then in your CSS, since your sample site will require the use of fixed widths, it will ease everything, so let's go with something really straight, just some positioning and hover states, nothing fancy. The only important thing is that I got rid of the IDs and replaced them by classes so you can re-use the styles if you need them, and instead of styling the hover state on the image, I added an .overlay class which holds the text and has a background, size, block properties, etc, to it's easier to manipulate. See code below:

然后在你的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)
}

you'll notice that I'm using more or less your styles, so you weren't that far away

你会注意到我或多或少地使用你的风格,所以你不是那么遥远

You can see a fiddle here

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

#2

You can omit this from your code

您可以从代码中省略它

#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;
}

and set your new image over it by using z-index:2. Then you change the opacity of your new image which is sitting on top of your original image.

并使用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*/
}

#3

try this css

试试这个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>

#1