Using separate id 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">
              <a href="#"><i class="fa fa-linkedin"></i></a>
            </div>
          </div>
        </div>
      </div>
      <div class="desc text-center">
        <h5 class="text-uppercase"><a href="#">XXX</a></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.

score 3 · Answer 1 · answered Dec 03 '19 at 05:59

.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>

score 1 · Answer 2 · answered Dec 03 '19 at 06:07

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">
              <a href="#"><i class="fa fa-linkedin"></i></a>
            </div>
          </div>
        </div>
      </div>
      <div class="desc text-center">
        <h5 class="text-uppercase"><a href="#">XXX</a></h5>
        <p>ZZZ</p>
      </div>
    </div>
  </div>

score 0 · Answer 3 · answered Dec 03 '19 at 05:56

0

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';" />

answered Dec 03 '19 at 05:56

ellenkis

137
7

Using separate id HTML

3 Answers3