'Is there a way to change position on the page of an image and the image that changes on hover with CSS?

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

.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;
}
<div class="figure">
  <img class="Sirv image-main sirv-image-loaded sirv-image-loading" 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 href="Revenge-of-the-Bacteria" class="image-link" rel="history"><img class="Sirv image-hover sirv-image-loaded sirv-image-loading" 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%;"></a>
</div>
css


Solution 1:[1]

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.

Solution 2:[2]

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 class="figure">
  <a href="Revenge-of-the-Bacteria" class="image-link" rel="history"><img class="Sirv image-hover sirv-image-loaded sirv-image-loading" 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 class="Sirv image-main sirv-image-loaded sirv-image-loading" 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>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 DreamTeK
Solution 2 Ahmad MRF

Related Questions