文本悬停时CSS图像不透明度转换

Question

当你将鼠标悬停在文本上方时，我一直试图让图像淡入淡出。

这是代码。

我需要有关添加内容的帮助，以便当文本悬停时，图像将从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

以下是您要求的小提琴：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
}