Hola @pedrolab,
@ramon_sevilla60 y @monicaauto56 están en lo cierto. El border añade al tamaño del elemento, y en un layout tan compacto como el de las miniaturas, provoca ese efecto de 'salto' o 'reflujo' del DOM.
La solución más efectiva es reservar el espacio para el borde en el estado normal, haciendo que el borde sea transparente por defecto. Luego, solo cambias el color de ese borde cuando la miniatura está activa o al pasar el ratón.
Aquí te dejo el CSS corregido para tu themes/classic/assets/css/custom.css:
.product-images .thumb-container {
border: 1px solid transparent; /* Reserva el espacio para el borde */
transition: all 0.2s ease-in-out; /* Mantiene la transición en el estado base */
}
.product-images .thumb-container.selected,
.product-images .thumb-container:hover {
border-color: #007bff; /* Solo cambia el color del borde existente */
transform: scale(1.02);
}
Explicación de los cambios:
- He añadido un estilo para
.product-images .thumb-container (el estado normal) donde se define un border: 1px solid transparent;. Esto asegura que cada miniatura siempre tenga un borde de 1px, pero es invisible. Así, el espacio ya está reservado y el layout no se altera.
- En el estilo para
.product-images .thumb-container.selected, .product-images .thumb-container:hover, ahora solo necesitas cambiar el border-color a #007bff. Como el grosor del borde es el mismo (1px), no habrá ningún cambio en el tamaño del elemento ni en su posición, eliminando el salto.
- La
transition se puede mover al estado base para que la animación del borde sea suave en ambas direcciones (entrada y salida del hover o selected).
Con esto debería funcionar perfectamente en tu PrestaShop 1.7.3.1.