CSS圖像在文本懸停上的不透明度轉變

我被困在試圖讓圖像淡入淡出時，當您將鼠標懸停在文本上。CSS圖像在文本懸停上的不透明度轉變

這是代碼。

我需要添加的內容的幫助才能使圖片在不透光的情況下從0不透明度轉變爲1。

<style> 
 
h1 { 
 
    text-align: center; 
 
    color: #cbd3db; 
 
font-family: "Adobe Caslon Pro", "Hoefler Text", Georgia, Garamond, Times, serif; 
 
text-shadow: 2px 2px 4px #d9e0e7; 
 
text-shadow: 2px 4px 4px #d9e0e7; 
 
font-size: 22pt; 
 
} 
 
    
 
    h2 { 
 
    text-align: center; 
 
    color: #cbd3db; 
 
font-family: "Adobe Caslon Pro", "Hoefler Text", Georgia, Garamond, Times, serif; 
 
text-shadow: 2px 2px 4px #d9e0e7; 
 
text-shadow: 2px 4px 4px #d9e0e7; 
 
font-size: 18pt; 
 
} 
 
    
 
p { 
 
    text-align: center; 
 
    color: #cbd3db; 
 
    font-family: "Adobe Caslon Pro", "Hoefler Text", Georgia, Garamond, Times, serif; 
 
} 
 
    
 
#quote { 
 
    text-align: center; 
 
    color: #97999c; 
 
    font-style: oblique; 
 
    transition: text-shadow 2s, color 4s ease-in-out; 
 
    
 
text-shadow: 5px 8px 7px #97999c; 
 
    font-family: "Adobe Caslon Pro", "Hoefler Text", Georgia, Garamond, Times, serif; 
 
\t letter-spacing:0.1em; 
 
\t text-align:center; 
 
\t margin: 40px auto; 
 
\t text-transform: lowercase; 
 
\t line-height: 145%; 
 
\t font-size: 12pt; 
 
\t font-variant: small-caps; 
 
position:relative; 
 
} 
 
    
 
    #quote:hover { 
 
color: #cbd3db; 
 
text-shadow: 10px 10px 7px #97999c; 
 
    transition: text-shadow 2s, color 4s ease-in-out; 
 

 

 
    } 
 
    #quote img { 
 
    
 
display: block; 
 
    margin-left: auto; 
 
margin-right: auto; 
 
opacity: 1; 
 

 
    } 
 
</style> 
 

 
<h1>A heading</h1> 
 

 
<br> 
 

 
<h2>Another heading</h2> 
 

 
<div id="quote">"Some text to be hovered over" 
 

 
    <img class"blood" src="http://fc05.deviantart.net/fs49/i/2009/198/8/0/Blood_Splatter_Texture_by_iEniGmAGraphics.png"/> 
 
</div> 
 

 

 
<br>

來源

2015-05-04 Theo

您可以檢出的鏈路讓事情淡入與CSS3輸出]（http://webdesign.about.com/od/css3tutorials/a/fade-in-and -out-with-css3.htm）以獲取詳細信息。 –

你想要的形象被隱藏，並在懸停顯示，對不對？

如果是這樣，那麼改變

#quote img { 

display: block; 
    margin-left: auto; 
margin-right: auto; 
opacity: 1; 

    }

要：

#quote:hover img { 
    opacity: 1; 
} 
#quote img { 
    display: block; 
    margin-left: auto; 
    margin-right: auto; 
    opacity: 0; 
    transition: all 4s; 
}

DEMO

來源

2015-05-04 10:03:21 LinkinTED

謝謝，感謝您的幫助！ – Theo

您的歡迎。 \t 如果答案適合您，請點擊左側的v標記將其標記爲解決方案。 :) – LinkinTED

這是給你的要求小提琴：https://jsfiddle.net/rp33r4nt/

，以方便增加不透明度的動畫過渡被添加。

嘗試下面的CSS

#quote img { 
    display: block; 
    margin - left: auto; 
    margin - right: auto; 
    transition: opacity 1s ease; 
    opacity: 1; 
} 

#quote:hover img { 
    opacity:0 
}

來源

2015-05-04 10:06:31

CSS圖像在文本懸停上的不透明度轉變

回答

相關問題