【发布时间】：2021-02-19 16:08:59
【问题描述】：
我正在使用 CSS 动画根据背景颜色显示不同的图像，但图像位置不应更改，并且背景颜色动画应该从下到上发生具有背景颜色填充我应该能够看到相应的图像悬停时的特定背景颜色。
HTML
div class="card">
<div class="card-img">
<div>
<img src="../../images/assets/kidney_empty.svg" alt="">
</div>
<div>
<img src="../../images/assets/kidneys_rev.svg" alt="">
</div>
</div>
<div class="card-body">
<div class="content-selector-wrapper">
<paragraph>
<p><strong>Renal manifestations</strong> can progress to kidney failure.</p>
</paragraph>
</div>
</div>
</div>
CSS
.mult-image-animation {
text-align : center;
}
.mult-image-animation .card-img {
width : 150px;
height : 150px;
border-radius : 50%;
overflow : hidden;
margin-bottom : 35px;
position : relative;
margin-left : auto;
margin-right : auto;
}
.mult-image-animation .card-img > div {
position : absolute;
width : 150px;
height : 150px;
margin-left : auto;
margin-right : auto;
padding : 40px 30px;
max-width : 100%;
top : 0;
bottom : 0;
right : 0;
left : 0;
margin : auto;
height : 150px;
-webkit-transition : all ease 3s;
-moz-transition : all ease 3s;
transition : all ease 3s;
}
.mult-image-animation .card-img div:first-child {
z-index : 1;
}
.mult-image-animation .card-body {
padding : 0;
font-size : 18px;
color : #4D4D4F;
font-family : "Merriweather", Helvetica, Arial, sans-serif;
}
.mult-image-animation .card-body strong {
font-family : "Merriweather-Bold", Helvetica, Arial, sans-serif;
}
.mult-image-animation.trigger-animation .card-img div:last-child {
box-shadow : inset 0 -70px 0 0 #EA1010;
z-index : 5;
}
我能够获得动画和背景图像，但我悬停它会隐藏上一张图像，但我希望在过渡完成时隐藏上一张图像。在哪里我应该能够看到这样的轮廓和实体图像
JS 小提琴图片 https://jsfiddle.net/prasadau1989/m9abLo4f/ 有没有办法让我在 SVG 中实现这一点？ https://jsfiddle.net/prasadau1989/m9abLo4f/1/
非常感谢任何指南。
【问题讨论】：
标签： html jquery css animation svg