Css animation stuck in spite of having a hover animation-CodePudding

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 >
                <img calss="mwhite" src="menuwhite.png" alt="" height="150px">
                <div >
                    <img  src="menublack.png" alt="" height="150px">
                </div>
            </div>

CodePudding user response：

.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;
}

<div ></div>

CodePudding user response：

This is happening because the front picture is always over the back picture so the .mwhite:hover never triggers, also you have a typo in your html, change that calss="mwhite" to

I had to change your HTML and CSS styles to make it work, I placed the front picture always in front and used this CSS selector to activate when hovering on the front picture .mwhite:hover .mblack

In the example I added a border and the images are not exactly over each other so the effect is more noticeable:

.Menu .mnpic {
    transform: translateX(30%);
}

.mwhite{
    opacity: 1;
    transition: 0.5s;
    border: 1px green solid;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 10;
}
.mwhite:hover {
    opacity: 0;
    border: 1px blue solid;
}
.mblack{
    border: 1px red solid;
    opacity: 0;
    transition: 0.5s;
}
.mwhite:hover   .mblack{
    opacity: 1;
    height: 200px;
}

<div >
    <img  src='https://picsum.photos/200' alt="" height="150px">
    <img  src='https://picsum.photos/300' alt="" height="150px">
</div>