change src image on hover using css - html

Question

2 image appear in same time, up and down.
I want hover image display none.
Hover image is appear below primary image.
Primary image is hide when hover.
Seems like dont work. and really need help on this.
.card-img-top {
border-radius: 0;
height: 250px;
width: 100%;
top: 50%;
left: 50%;
transform: translate(0%, 0%);
object-fit: cover;
margin-bottom: 20px;
}
.card a img {
display: block;
}
.card a:hover img:first-child {
display: none;
}
<div class="card col-12 col-md-6 col-sm-12 col-lg-6 col-xl-4">
<a href="#">
<img class="card-img-top" src="images/True Blue Asia.jpg"/>
<img class="card-img-top" src="images/Asia Bagus.jpg"/>
<div class="card-img-overlay d-table-cell align-middle">
<p>true blue asia</p>
</div>
<div class="card-body">
<div class="row">
<div class="col-12 col-md-3">
<div class="card-date">Oct 2019</div>
</div>
<div class="col-12 col-md-9">
<div class="card-title">Roots, Heritage, Authenticity</div>
<div class="card-content">Asia’s myriad cultures manifest in practices derived from traditional value systems.</div>
</div>
</div>
</div>
</a>
</div>

Answer 1

<div class="card">
<img src="/image_displayed_as_default" class="hover-hidden"/>
<img src="/image_displayed_when_hover" class="hover-only"/>
</div>
.card img {
opacity: 1;
transition: opacity 200ms;
}
.card:hover img.hover-hidden,
.card:not(:hover) img.hover-only {
opacity: 0;
}

Answer 2

You are looking for this
Pure CSS solution
#aks {
width:0px;
height:0px;
background:url('http://dummyimage.com/100x100/000/fff');
padding:50px;
}
#aks:hover {
background: url('http://dummyimage.com/100x100/eb00eb/fff');
}
<img id="aks" src="http://dummyimage.com/100x100/000/fff"/>
Your code solution
Issue i you are not hide second image initially
.card-img-top {
border-radius: 0;
height: 250px;
width: 100%;
top: 50%;
left: 50%;
transform: translate(0%, 0%);
object-fit: cover;
margin-bottom: 20px;
}
.card a img {
display: block;
}
.card a:hover img:first-child {
display: none;
}
.card a .card-img-below{
display: none;
}
.card a:hover .card-img-below {
display: block;
}
a{
display:block;
}
<div class="card col-12 col-md-6 col-sm-12 col-lg-6 col-xl-4">
<a href="#">
<img class="card-img-above" src="https://cdn4.iconfinder.com/data/icons/imoticons/105/imoticon_15-128.png"/>
<img class="card-img-below" src="https://cdn4.iconfinder.com/data/icons/imoticons/105/imoticon_12-128.png"/>
<div class="card-img-overlay d-table-cell align-middle">
<p>true blue asia</p>
</div>
<div class="card-body">
<div class="row">
<div class="col-12 col-md-3">
<div class="card-date">Oct 2019</div>
</div>
<div class="col-12 col-md-9">
<div class="card-title">Roots, Heritage, Authenticity</div>
<div class="card-content">Asia’s myriad cultures manifest in practices derived from traditional value systems.</div>
</div>
</div>
</div>
</a>
</div>
Change the image url