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

Question

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.

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!

Answer 1

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

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

.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

Answer 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.

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

try this 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>