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

【问题标题】：CSS image opacity transition on text hover文本悬停时的 CSS 图像不透明度过渡
【发布时间】：2015-07-13 16:02:02
【问题描述】：

当您将鼠标悬停在文本上/移出时，我无法让图像淡入淡出。

这是代码。

我需要添加什么来制作它，以便当文本悬停时图像将从 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>

【问题讨论】：

您可以查看链接Make Things Fade In and Out with CSS3了解详情。

标签： css css-transitions

【解决方案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

【讨论】：

谢谢您的帮助！

【解决方案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
}

【讨论】：