Jak wyświetlić obraz w div na hover z jquery? - jquery, html, css, hover

Mam listę funkcji i muszę wyświetlić obraz po najechaniu myszą na div z ikoną i nagłówkiem (.top-wrapper klasa w kodzie). Teraz mam trochę kodu jquery, ale działa on na wszystkich elementach po najechaniu myszą, potrzebuję go do pracy osobno na każdym z elementów.

HTML:

<ul class="row features-list justify-content-center justify-content-md-between justify-content-lg-center">
<li class="col-xl-3">
<img src="/images/images/features-card-img.png" alt="Bottle">
<div class="d-flex flex-column bottle-text-wrapper arrow-up text-left mx-auto">
<h3 class="features-item-header bottle-header">Redesigning With Personality</h3>
<span class="bottle-small-text ml-auto">in <span class="yellow-text">web design</span></span>
</div>
</li>
<li class="col-10 col-sm-6 col-md-5 col-lg-4 col-xl-3 feature-item">
<div class="feature-top" id="feature-top-dev">
<div class="top-wrapper">
<i class="fa fa-desktop" aria-hidden="true"></i>
<h3 class="features-item-header">Web Development</h3>
</div>
<div class="hover-content">
<img src="/images/images/features-card-img.png" alt="Bottle">
</div>
</div>
<div class="feature-bottom mx-auto">
<p class="features-text">Lorem ipsum dolor sit amet,
consectetur.</p>
</div>
</li>
<li class="col-10 col-sm-6 col-md-5 col-lg-4 col-xl-3 feature-item">
<div class="feature-top" id="feature-top-design">
<div class="top-wrapper">
<i class="fa fa-th" aria-hidden="true"></i>
<h3 class="features-item-header">Web Design</h3>
</div>
<div class="hover-content">
<img src="/images/images/features-card-img.png" alt="Bottle">
</div>
</div>
<div class="feature-bottom mx-auto">
<p class="features-text">Lorem ipsum dolor sit amet,
consectetur.</p>
</div>
</li>
<li class="col-10 col-sm-6 col-md-5 col-lg-4 col-xl-3 feature-item">
<div class="feature-top" id="feature-top-graph-des">
<div class="top-wrapper">
<i class="fa fa-pencil" aria-hidden="true"></i>
<h3 class="features-item-header">Graphic Design</h3>
</div>
<div class="hover-content">
<img src="/images/images/features-card-img.png" alt="Bottle">
</div>
</div>
<div class="feature-bottom mx-auto">
<p class="features-text">Lorem ipsum dolor sit amet,
consectetur.</p>
</div>
</li>
</ul>
</div>

jquery:

 $("#feature-top-dev").hover(
function() {
$(".top-wrapper").addClass("d-none");
$(".feature-top").css({"padding": "0", "background-color": "#f5f5f5"});
$(".hover-content").fadeIn("slow");
},function() {
$(".top-wrapper").removeClass("d-none");
$(".feature-top").css({"padding": "20px 0", "background-color": "#ffea00"});
$(".hover-content").fadeOut("slow");
}
);

Zrzut ekranu, jak to wygląda:

Po najechaniu kursorem na div z żółtym tłem należy go zmienić na obraz.

Odpowiedzi:

Powinieneś umieścić img z atrybutami css, takimi jak

img.hover {
position: absolute;
top: 0px;
left: 0px;
display: none;
width: 100%;
}

więc po najechaniu myszką na element fadeToggle () obraz i fadeToggle () z powrotem, gdy mysz opuszcza być może