Css animation stuck in spite of having a hover animation

Question

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 — Gonzalo F S, Dec 01 '22 at 09:09
Please provide enough code so others can better understand or reproduce the problem. — Community, Dec 01 '22 at 10:52

score 0 · Answer 1 · answered Dec 01 '22 at 09:29

.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 class="hover"></div>

Gonzalo F S · Accepted Answer · 2022-12-01T11:50:14.753

0

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 class="mwhite"

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 class="mnpic">
    <img class="mwhite" src='https://picsum.photos/200' alt="" height="150px">
    <img class="mblack" src='https://picsum.photos/300' alt="" height="150px">
</div>

edited Dec 01 '22 at 11:50

answered Dec 01 '22 at 11:41

Gonzalo F S

412
3
8

but what if i want to make the mwhite disappear and mblack take its place – Minhaz Ahmed Dec 01 '22 at 11:54
It is doing exactly that, what is the problem? @MinhazAhmed Just add position absolute to both elements and remove the top:0 left:0 – Gonzalo F S Dec 01 '22 at 12:03
1

oh yeah thank you it started working, thank you <3 – Minhaz Ahmed Dec 01 '22 at 12:10
can you explain me a bit on the last there, without .mblack:hover how thats getting triggered with .mwhite:hover + .mblack , and thats not contradicting with two .mwhite:hover – Minhaz Ahmed Dec 01 '22 at 12:17
Because with the CSS selectors the style applies to the last element metioned, so when .mwhite:hover its direct brother with class .mblack apply the styles, see: https://stackoverflow.com/questions/4502633/how-to-affect-other-elements-when-one-element-is-hovered @MinhazAhmed – Gonzalo F S Dec 01 '22 at 13:46

Css animation stuck in spite of having a hover animation

2 Answers2