es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

  • es.davy.ai/
  • Programación /
  • Colocar dos imágenes en exactamente el mismo lugar con CSS y mostrarlas al pasar el cursor por encima.

Colocar dos imágenes en exactamente el mismo lugar con CSS y mostrarlas al pasar el cursor por encima.

13 Jul, 2023 Programación

Estoy trabajando en mi botón y tratando de agregar dos imágenes (flechas) en la misma posición. Al pasar el cursor, una debe ocultarse y la segunda debe mostrarse.

Mi problema es que las imágenes (flechas) están una al lado de la otra y deberían superponerse.

Antes de pasar el cursor:

Antes del cursor:

Después de pasar el cursor:

Después del cursor:

Mi código:

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

<div class="button-wrapper">
  <a class="shop-button" [routerlink]="/shop">IR A LA TIENDA
    <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>

Estoy intentando algo con position: absolute, pero no está funcionando.

Tags:  , , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Para hacer que las imágenes se superpongan, puedes usar la propiedad position: absolute en ambas y establecer sus posiciones exactamente iguales.

    Aquí tienes una versión actualizada del CSS para .shop-button que debería lograr el efecto deseado:

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

  /* Posición de la primera imagen de flecha */
  .arrow-image {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    opacity: 0;
  }

  /* Posición de la segunda imagen de flecha */
  .arrow-image-hover {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }

  /* Mostrar/ocultar las imágenes de flecha al pasar el cursor */
  &:hover {
    background-color: black;
    border-color: black;
    color: white;

    /* Ocultar la primera imagen de flecha */
    .arrow-image {
      opacity: 0;
      transition: opacity 0.3s ease-in-out;
    }

    /* Mostrar la segunda imagen de flecha */
    .arrow-image-hover {
      opacity: 1;
      transition: opacity 0.3s ease-in-out;
    }
  }
}

    Puedes ajustar las propiedades top y left para colocar las imágenes exactamente donde desees. El transform: translate(-50%, -50%) se utiliza para centrar las imágenes tanto horizontal como verticalmente.

    ¡Espero que esto te ayude!

Comments are closed.