我正在为我的平面设计活动制作一个作品集。
我试图使一个主页悬停一个链接显示图像，它的工作原理。我只是在寻找一种方法，使图像淡入，因为它显示自己。
我在下面添加了一个片段。如果有人能帮忙，我将不胜感激:)祝你过得愉快
#container { width: 100%; margin-top: 0px; height: auto; float: left; font-size: 30px; padding-bottom: 4px; border: 1px solid green;}
#container a { float: left; color: #ff4d00; text-decoration: none; height: auto; margin-top: 0px; }
#container a:hover span { display: block; position: absolute; top: 20%; left: 10%; right: 10%; bottom: 20%; }
#container a span { display: none; z-index: 4; margin: 0; }
img { opacity: 1; transition: 1s; }
.center { display: block; margin-left: auto; margin-right: auto; width: auto; }<div id="container">
<a href="Project 1.html">
<p>Project 1.</p><br>
<span><img src="https://img.freepik.com/photos-gratuite/mur-beton-blanc_53876-92803.jpg?w=2000g" class="center" width="100%" height="100%" margin-top="25px" margin-bottom="25px"/>
</span>
</a>
<a href="Project 2.html">
<p>Project 2.</p>
<span><img src="https://images.unsplash.com/photo-1629197520635-16570fbd0bb3?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8Mnx8Z3JlZW4lMjB0ZXh0dXJlfGVufDB8fDB8fA%3D%3D&w=1000&q=80" class="center" width="100%" height="100%" margin-top="25px" margin-bottom="25px"/>
</span>
</a>
<a href="Project 3.html">
<p>Project 3.</p>
<span><img src="https://img.freepik.com/photos-gratuite/mur-beton-blanc_53876-92803.jpg?w=2000" class="center" width="100%" height="100%" margin-top="25px" margin-bottom="25px"/>
</span>
</a>你的意思是当你悬停链接时图像上的渐变吗?如果你是这个意思你不能用display: none;显示:block;这是不允许的。然而，您可以用另一种方式解决这个问题，可见性参数允许您这样做。我在下面给你留一个例子。
#container {
width: 100%;
margin-top: 0px;
height: auto;
float: left;
font-size: 30px;
padding-bottom: 4px;
border: 1px solid green;
}
#container a {
float: left;
color: #ff4d00;
text-decoration: none;
height: auto;
margin-top: 0px;
}
#container a span {
position: absolute;
top: 40%;
left: 10%;
right: 10%;
bottom: 0%;
z-index: 4;
margin: 0;
visibility: hidden;
opacity: 0;
transition: visibility 0.2s, opacity 0.2s;
}
#container a:hover span {
visibility: visible;
opacity: 1;
transition: visibility 0.2s, opacity 0.2s;
}
.center {
display: block;
margin-left: auto;
margin-right: auto;
width: auto;
}<div id="container">
<a href="Project 1.html">
<p>Project 1.</p><br>
<span><img src="https://img.freepik.com/photos-gratuite/mur-beton-blanc_53876-92803.jpg?w=2000g" class="center" width="100%" height="100%" margin-top="25px" margin-bottom="25px"/>
</span>
</a>
<a href="Project 2.html">
<p>Project 2.</p>
<span><img src="https://images.unsplash.com/photo-1629197520635-16570fbd0bb3?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8Mnx8Z3JlZW4lMjB0ZXh0dXJlfGVufDB8fDB8fA%3D%3D&w=1000&q=80" class="center" width="100%" height="100%" margin-top="25px" margin-bottom="25px"/>
</span>
</a>
<a href="Project 3.html">
<p>Project 3.</p>
<span><img src="https://img.freepik.com/photos-gratuite/mur-beton-blanc_53876-92803.jpg?w=2000" class="center" width="100%" height="100%" margin-top="25px" margin-bottom="25px"/>
</span>
</a>
</div>