Using separate id HTML - html

Question

I have an image in HTML (aaa.jpg) and when I hover I need it to switch to another image (t1.jpg) indicated in css
.single-member .thumb .overlay-member #1 {
background: url(../img/t1.jpg) no-repeat center center/cover;
text-align: center;
padding: 30px;
opacity: 0;
-webkit-transition: all 0.3s ease 0s;
-moz-transition: all 0.3s ease 0s;
-o-transition: all 0.3s ease 0s;
transition: all 0.3s ease 0s;
}
<div class="row">
<div class="col-lg-3 col-sm-6">
<div class="single-member">
<div id="1">
<div class="thumb relative" style="background: url(img/aaa.jpg);">
<div class="overlay overlay-member d-flex flex-column justify-content-end align-items-center">
<div class="line"></div>
<div class="social d-flex align-items-center justify-content-center">
<i class="fa fa-linkedin"></i>
</div>
</div>
</div>
</div>
<div class="desc text-center">
<h5 class="text-uppercase">XXX</h5>
<p>ZZZ</p>
</div>
</div>
</div>
The above code works fine, but it works for using the same image for all. I need to use different images for people, so I repeated the code in html and css but changing the id. Then it is showing only the image stated in HTML file, flipping to the css ones.

Answer 1

.card {
width: 130px;
height: 195px;
position: relative;
display: inline-block;
margin: 50px;
}
.card .img-top {
display: none;
position: absolute;
top: 0;
left: 0;
z-index: 99;
}
.card:hover .img-top {
display: inline;
}
<div class="card">
<img src="https://www.tutorialrepublic.com/examples/images/card-front.jpg" alt="Card Back">
<img src="https://www.tutorialrepublic.com/examples/images/card-back.jpg" class="img-top" alt="Card Front">
</div>

Answer 2

First of all you needs to make some changes in your HTML
You can't use number ID as a css selector like #1 have to replaced with #one
REF: #1 should not use
and you can simply change image by css :hover selector.
Hope this will help you.
.single-member #one {
background: url(https://via.placeholder.com/728x90.png?text=normal) no-repeat center center/cover;
text-align: center;
padding: 30px;
opacity: 1;
-webkit-transition: all 0.3s ease 0s;
-moz-transition: all 0.3s ease 0s;
-o-transition: all 0.3s ease 0s;
transition: all 0.3s ease 0s;
}
.single-member #one:hover {
background: url(https://via.placeholder.com/728x90.png?text=hover) no-repeat center center/cover;
}
<div class="row">
<div class="col-lg-3 col-sm-6">
<div class="single-member">
<div id="one">
<div class="thumb relative">
<div class="overlay overlay-member d-flex flex-column justify-content-end align-items-center">
<div class="line"></div>
<div class="social d-flex align-items-center justify-content-center">
<i class="fa fa-linkedin"></i>
</div>
</div>
</div>
</div>
<div class="desc text-center">
<h5 class="text-uppercase">XXX</h5>
<p>ZZZ</p>
</div>
</div>
</div>

Answer 3

I suggest to use Jscript in HTML it will be of one line
<img src='FirstImage.png' onmouseover="this.src='ChangedImage.png';" onmouseout="this.src='FirstImage.png';" />