CSS hover selector doesn't showing anything-CodePudding

So I'm trying to learn HTML and CSS with solving the frontendmentor challenges. This one's new so i couldn't find a solution to lookup my problem. My problem is; i haven't done any hover effect before so, i tried to make by myself and i couldn't, it should work actually i mean everything looks good but idk. Every help appreciated.

HTML

    <div class="nft-img">
      <img id="view" src="./images/icon-view.svg" alt="">
      <img id="nft" src="./images/image-equilibrium.jpg" alt="">
    </div>

CSS

#nft{
    width: 300px;
    border-radius: 7px;
}

#view{
    position: absolute;
    opacity: 0;
    width: 150px;
}

#nft:hover #view{
    opacity: 1;
    cursor: pointer;
}

CodePudding user response：

This question is poorly written, please have a look at the guidelines.

However, you haven't defined a height property on your elements, because of this, they are invisible. By default, the height of a block element is the height of the content, and the width is the length of the page. Check out this for further information.

My above answer does not help you, I did not see that you included images. The problem should be solved with this answer. Your selector #nft:hover #view does not work, because these elements are siblings. And also keep the z-index in mind.

CodePudding user response：

try to change to:

#nft:hover ~ #view{
    opacity: 1;
    cursor: pointer;
}