Placing two pictures in exactly the same place with css and showing on hover-CodePudding

Im working on my button and trying add two images (arrows) on same position. On hover one should hide and second show.

My problem is that the images (arrows) are next to each other and they should overlap

Before hover:

After: hover:

My code:

<div class="button-wrapper">
    <a class="shop-button" [routerLink]="'/shop'">GO TO SHOPPING
        <img src="/assets/arrow_1.svg" class="arrow-image"  alt="arrow" />
        <img src="/assets/arrow_2.svg" class="arrow-image-hover"  alt="arrow" />
    </a>
  </div>

Scss:

   .shop-button {
      cursor: pointer;
      padding: 20px 25px 21px 25px;
      border: 1px solid black;
      background-color: white;
      color: black;
      transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out, border-color 0.3s ease-in-out;

      .arrow-image {
          opacity: 0;
        }

      &:hover {
        background-color: black;
        border-color: black;
        color: white;
        .arrow-image-hover {
          opacity: 0;
          transition: opacity 0.3s ease-in-out;
        }
        .arrow-image {
          opacity: 1;
          transition: opacity 0.3s ease-in-out;
        }
      }
    }

    a {
      text-decoration: none;
      img {
        margin-left: 10px;
      }
    }
  }

Im trying something with position absolute but its not working

CodePudding user response：

Would you consider using just css and font-awesome If so you can do it very simply. The library is free.

body {
   font-family: "Avenir Next", sans-serif;
   background: #ccc;
   padding: 100px;
}
.shopping {
    padding: 12px 24px;
    color: black;
    background: white;
    transition: background 0.2s ease-out;
    text-decoration: none;
}

.shopping:hover {
    padding: 12px 24px;
    color: white;
    background: black;
    transition: background 0.2s ease-in;

}

.shopping i {
    color: black;
    margin: 0 6px;
}

.shopping:hover i {
    margin: 0 6px;
    color: white;
}

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
        content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, shrink-to-fit=no" />
        <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt Y8vEf7N7fWAU" crossorigin="anonymous">

 </head>

<body>

    <a href="" class="shopping">
        GO TO SHOPPING <i class="fas fa-long-arrow-alt-right"></i>
    </a>

</body>


</html>

CodePudding user response：

Please see the adjustments I made to your CSS. Assuming these buttons are already placed on top of each other, you can use the following CSS to make the white one show on hover. I used visibility: hidden; for starting state of arrow-image-hover and visibility: visible; for the button to appear on the hover state. I also used visibility: hidden; for the first button to disappear on hover. Please see below for that behavior.

.shop-button {
      cursor: pointer;
      padding: 20px 25px 21px 25px;
      border: 1px solid black;
      background-color: white;
      color: black;
      transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out, border-color 0.3s ease-in-out;
}


.shop-button:hover {
  background-color: black;
  color: white;
}

.arrow-image-hover {
  visibility: hidden;
}

.shop-button:hover .arrow-image {
  visibility: hidden;
}

.shop-button:hover .arrow-image-hover {
  visibility: visible;
}

img {
  position: relative;
  top: 20px;
}

<div class="button-wrapper">
    <a class="shop-button" [routerLink]="'/shop'">GO TO SHOPPING
        <img src="https://dummyimage.com/50x50/000/fff" class="arrow-image"  alt="arrow" />
        <img src="https://dummyimage.com/50x50/ffffff/0d0d0f" class="arrow-image-hover"  alt="arrow" />
    </a>
</div>

You can get your arrows to be exactly on top of each other by using absolute positioning to align your image.

CodePudding user response：

If the cursor is not hovering on the button then you should add display: none; to the white arrow and add display: none; to black arrow when the cursor is hovering.