Cómo crear un efecto de imagen al pasar el cursor

Para crear un efecto de imagen al pasar el cursor, sigue estos pasos:

1. Añade una galería con el diseño «Stacked»

2. Añadir 2 imágenes

3. Averigua el ID de un bloque de galería mediante la extensión de Chrome «Squarespace Collection/Block Identifier»

4. Copia los estilos que aparecen a continuación en un editor de texto o código y sustituye #block por el ID del bloque de la galería que has encontrado en el paso 3.

5. Añadir estilos editados al CSS personalizado

/* Rollover Image Effect */
#block .sqs-gallery-block-stacked {
  .sqs-gallery {
    position: relative;
  }

  .image-wrapper:hover ~ .image-wrapper {
    opacity: 1;
  }

  .image-wrapper ~ .image-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease-in;
  }
}

Nota: Puedes saltarte los pasos 3 y 4. Añade este estilo al código de la cabecera de la página, en la sección donde se encuentra la galería. Ten cuidado, ya que este código afectará a todas las galerías con el diseño «Stacked» de la página.

<!-- Rollover Image Effect -->
<style>
.sqs-gallery-block-stacked .sqs-gallery {
  position: relative;
}

.sqs-gallery-block-stacked .sqs-gallery .image-wrapper:hover ~ .image-wrapper {
  opacity: 1;
}

.sqs-gallery-block-stacked .sqs-gallery .image-wrapper ~ .image-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease-in;
}
</style>
<!-- end Rollover Image Effect -->