我被困在試圖讓圖像淡入淡出時,當您將鼠標懸停在文本上。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>
您可以檢出的鏈路讓事情淡入與CSS3輸出](http://webdesign.about.com/od/css3tutorials/a/fade-in-and -out-with-css3.htm)以獲取詳細信息。 –