將鼠標懸停在圖像上時出現文字

我正在嘗試爲我的網站添加樣式。這是超級簡單，但我已經嘗試了幾個小時，並無法實現它的工作。預覽在這裏：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>

好了，所以基本上我不知道我在做什麼。我嘗試過使用每個可用的在線資源來嘗試並找出它，但沒有任何工作。謝謝你的幫助！

來源

2014-09-26 elisabeththemes

我沒有看到標題......它在哪裏？ – andufo 2014-09-26 02:52:20

你能提供一個這樣的小提琴嗎？ – 2014-09-26 02:56:41

只要能使你的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

來源

2014-09-26 03:06:11 Devin

您可以省略此您的代碼

#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*/ 
}

來源

2014-09-26 03:43:06 Fergoso

試試這個 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>

來源

2014-09-26 04:26:54 Justin

將鼠標懸停在圖像上時出現文字

回答

相關問題