>FI一直在研究多种解决方案，因为我想在我的第一个致敬页面的：hover图像中包含文本。虽然，事实证明这比我想象的要困难得多。我一直在寻找@keyframes，但遇到了麻烦，因为我无法用它做我想做的事。相当接近，但不够近。
最后，我找到的最佳解决方案是您目前在此页面上看到的解决方案：https://codepen.io/shalvus/pen/rNamLWO
我的问题可以在那里看到：https://i.gyazo.com/b1540e9e0902acac2813afcf01d0cfab.mp4
正如你所看到的，它正在做它的工作，但我似乎找不到一种方法来让那个丑陋的边界消失。我一直在尝试很多不同的东西来让它工作，但似乎没有一个能让它消失。不过我不是专家，我想我会依靠你的技能来帮助我。这是与问题相关的 CSS：
.relative{
display:flex;
justify-content:space-around;
}
.A, .A img{
width:95%;
height:auto;
filter:grayscale(1);
border:0px solid transparent;
border-radius:50%;
}
.A{
overflow:hidden;
}
.C{
position:absolute;
width:inherit;
height:100%;
top:100%;
background-color:rgba(0,0,0,0.6);
transition: all 0.7s;
text-align:center;
color:white;
font-family:'Montserrat', sans-serif;
font-size:1.6em;
}
.A:hover .C{
top:70%;
}
.img:hover .A{
filter:grayscale(0);
}谢谢你的任何回答！
PS ：我也在尝试制作最后一部分".img：hover .A{" 在悬停时取消灰度值，但它也不起作用。如果有人有线索，我很高兴听到，但这是一个相当小的问题。
尝试替换
.A, .A img{
width:95%;
跟
.A {
margin: 0 5px;
}
.A, .A img{
width:100%;
看看这是否是你想要的。代码非常自我解释。
html {
font-size:10px;
}
body {
margin:0px;
}
main {
background-color:#EAEAEA;
}
h1 {
font-family:'Ubuntu';
color:#FFF;
font-size:6em;
}
h2 {
font-family:'Catamaran', sans-serif;
color:#FFF;
font-size:2em;
}
#tmain {
background-color:#0B0B0B;
padding:1.5em;
padding-bottom:3em;
margin:5px;
text-align:center;
}
.relative{
display:flex;
justify-content:space-around;
}
.A {
margin: 0 5px; /* add this to give a space between the circles */
}
.A, .A img{
width:100%; /* change from 95% to 100% */
height:auto;
filter:grayscale(1);
border:0px solid transparent;
border-radius:50%;
}
.A{
overflow:hidden;
}
.C{
position:absolute;
width:inherit;
height:100%;
top:100%;
background-color:rgba(0,0,0,0.6);
transition: all 0.7s;
text-align:center;
color:white;
font-family:'Montserrat', sans-serif;
font-size:1.6em;
}
.A:hover .C{
top:70%;
}
.img:hover .A{
filter:grayscale(0);
}<head>
<title>Tribute Page</title>
<link href="https://fonts.googleapis.com/css?family=Lato|Montserrat|Ubuntu&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Catamaran:200&display=swap" rel="stylesheet">
<!--
font-family: 'Catamaran', sans-serif;
font-family: 'Lato', sans-serif;
font-family: 'Montserrat', sans-serif;
font-family: 'Ubuntu', sans-serif;
-->
</head>
<body>
<main id=main>
<div id=tmain>
<h1>The Art of Doubt</h1>
<hr width="10%">
<h2>a lifelong work by Henri Broch, Gérard Majax and other defenders of the Scientific Method</h2>
</div>
<div class="relative">
<div class="A relative">
<img src="https://i.postimg.cc/MZvLK7Dy/250BROCH.jpg" alt="Henri Broch Portrait">
<div class="C">Henri Broch</div>
</div>
<div class="A relative">
<img src="https://i.postimg.cc/rF4Y5q7s/250MAJAX.jpg" alt="Gérard Majax Portrait">
<div class="C">Gérard Majax</div>
</div>
<div class="A relative">
<img src="https://i.postimg.cc/T3XN9ZX9/250-DURAND.jpg" alt="Thomas Durand Portrait">
<div class="C">Thomas Durand</div>
</div>
<div class="A relative">
<img src="https://i.postimg.cc/BZkV8jYR/250HYG.jpg" alt="Michel Christophe Portrait">
<div class="C">Michel Christophe</div>
</div>
</div>
</main>
</body>