How do I Remove(using a mouseover) a display none(CSS) with Jquery?

i am making a card nft project to practice where when i mouseover it should remove the display:none from the HTML class="nft" . I tried many things also only using CSS but i didn't achieve the results. If anyone could help me or give a explanation to make help I really apreciate.
HTML:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

$(document).ready(function(){
    $('.nft').on('mouseover', function() {
        $(this).toggle();
     });
});

<!-- language: lang-css -->

.img-text{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    margin: 10px 25px;
}

.nft{
    width: 250px;
    height: 250px;
    background-color: cyan;
    border-radius: 15px;
    position: absolute;
    display: none;
    opacity: .5;
    cursor: pointer;
}

.eye{
    position: relative;
    top: 100px;
    left: 40%;
}
.nft-image{
    max-height: 250px;
    max-width: 250px;
    
    border-radius: 15px;
}

<!-- language: lang-html -->

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="img-text">
   <div class="nft">
       <img src="./img/icon-view.svg" alt="" class="eye">
    </div>
    <img class="nft-image" src="./img/image-equilibrium.jpg" alt="NFT">
    <h1 class="heading">Equilibrium #3429</h1>
</div>

<!-- end snippet -->

I tried using Hover with CSS, add and removing classes in html and using jquery but no result

Thank you

You'd want to make it invisible in another way such as this:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->
$(document).ready(function () {
let show = true
$('.nft').on('mouseover', function () {
$(this).css('background-color', show ? 'cyan' : '')
show = !show
})
})

<!-- language: lang-css -->
.img-text {
display: flex;
flex-direction: column;
justify-content: space-between;
margin: 10px 25px;
}

.nft {
width: 250px;
height: 250px;
border-radius: 15px;
position: absolute;
opacity: 0.5;
cursor: pointer;
}

.eye {
position: relative;
top: 100px;
left: 40%;
}
.nft-image {
max-height: 250px;
max-width: 250px;

border-radius: 15px;
}

<!-- language: lang-html -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<div class="img-text">
<div class="nft">
<img src="./img/icon-view.svg" alt="" class="eye" />
</div>
<img class="nft-image" src="./img/image-equilibrium.jpg" alt="NFT" />
<h1 class="heading">Equilibrium #3429</h1>
</div>

<!-- end snippet -->