CSS 文本悬停时图像不透明度过渡

Question

当您将 over/out 悬停在文本上时，我一直在尝试让图像淡入淡出。

这是代码。

我需要有关添加内容的帮助，以便当文本悬停时，图像将从 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;
 letter-spacing:0.1em;
 text-align:center;
 margin: 40px auto;
 text-transform: lowercase;
 line-height: 145%;
 font-size: 12pt;
 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>

Answer 1

您希望隐藏图像，悬停时显示图像，对吗？

如果是，则更改

   #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

Answer 2

这是满足您要求的fiddle：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
}

CSS 文本悬停时图像不透明度过渡

CSS image opacity transition on text hover

css

css-transitions