Css animation stuck in spite of having a hover animation答案

【问题标题】：Css animation stuck in spite of having a hover animationCss animation stuck in spite of having a hover animation
【发布时间】：2022-12-01 18:57:05
【问题描述】：

I want to have a hover animation that disappears when hovering over the picture and another picture takes its place, but the back picture isn't disappearing

I tried to use opacity 1 to go to 0, and transition time 0.5sec but it's stuck in the old position

.Menu .mnpic {
    transform: translateX(30%);
    /* display: flex;
    justify-content: center;
    align-content: center; */
}

.mnovly {
    position: absolute;
    top: 0;
}

.mwhite{
    /* position: relative; */
    opacity: 1;
    transition: 0.5s;
}
.mwhite:hover {
    opacity: 0;
}
.mblack{
    opacity: 0;
    transition: 0.5s;
}
.mblack:hover{
    opacity: 1;
    height: 200px;
}

<div class="mnpic">
                <img calss="mwhite" src="menuwhite.png" alt="" height="150px">
                <div class="mnovly">
                    <img class="mblack" src="menublack.png" alt="" height="150px">
                </div>
            </div>

【问题讨论】：

Could you share your code? so we can see what you have so far
How do I attach pictures
Please provide enough code so others can better understand or reproduce the problem.

标签： html css

【解决方案1】：

.hover {
  width: 200px;
  height: 200px;
  background: url('https://picsum.photos/200') no-repeat center center;
  position: relative;
}

.hover:after{
  content: '';
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background: url('https://picsum.photos/300') no-repeat center center;
  opacity: 0;
  transition: opacity .3s;
}

.hover:hover:after {
  opacity: 1;
}

&lt;div class="hover"&gt;&lt;/div&gt;

【讨论】：