Is there a way to change position on the page of an image and the image that changes on hover with C-CodePudding

I am trying to change the position of both images (image and image hover change) to elsewhere on my site. However when I edit the positions code one image moves and the other stays. Any help greatly appreciated <3

CSS

/*
  Rollover Image
 */
.figure {
    position: relative;
     /* can be omitted for a regular non-lazy image */
    width: 300;
    height: auto;
    
}
.figure img.image-hover {
    
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  object-fit: contain;
  opacity: 0;
  transition: opacity .2s;
}
.figure:hover img.image-hover {
  opacity: 1;

HTML script src="https://scripts.sirv.com/sirvjs/v3/sirv.js">

CodePudding user response：

Just use absolute positioning on the parent element.

.figure {
  position: absolute;
  top:100px;
  left:300px;
}

You do not need to change the position on the img as it is already positioned relative to its container.

CodePudding user response：

put images in same container.

.figure {
        position: relative;
        height: auto;
    }
    .figure img{
      position: absolute;
      
      /* change position for both images*/

      top: 20px;
      right: 0;
      left: 0;
      bottom: 0;


      object-fit: contain;
      transition: opacity .2s;
    }

    .figure:hover img.image-hover {
      z-index: 1;
   }

<div >
  <a href="Revenge-of-the-Bacteria"  rel="history"><img  data-src="https://freight.cargo.site/t/original/i/30c4299c88a8aba512919f8e9d7607340223ea4f4bb0032c8bb42fb622fac9d2/Screenshot-2022-04-27-at-13.18.43.png" referrerpolicy="no-referrer-when-downgrade" id="responsive-image-9283795" src="https://freight.cargo.site/t/original/i/30c4299c88a8aba512919f8e9d7607340223ea4f4bb0032c8bb42fb622fac9d2/Screenshot-2022-04-27-at-13.18.43.png" style="width: 30%;">
  
  <img  src="https://freight.cargo.site/t/original/i/4867b4e577f4d455e8e84acf0935e4fb0f6367d4edd5d45a15dc4035c95187fc/war-on-bacteria.png" data-src="https://freight.cargo.site/t/original/i/4867b4e577f4d455e8e84acf0935e4fb0f6367d4edd5d45a15dc4035c95187fc/war-on-bacteria.png" referrerpolicy="no-referrer-when-downgrade" id="responsive-image-4609053" style="width: 30%;" alt="Bose 700 headphones, front"></a>
</div>