Hola @rocio_96, el problema que describes es muy común y se debe precisamente a cómo CSS maneja la propiedad border. Cuando añades un border: 1px, el elemento crece 2px (1px por cada lado), lo que desplaza los elementos adyacentes.
La solución más limpia y que mantiene el layout estable es, como bien apunta @gonzaloshop, usar un border transparente en el estado normal, y luego cambiar el color de ese mismo borde en el estado selected. Esto reserva el espacio desde el principio y no hay desplazamiento. Además, podemos añadir una pequeña transformación y una transición para un efecto más profesional.
Aquí tienes el código CSS corregido para themes/classic/assets/css/custom.css:
.product-images .thumb-container {
border: 1px solid transparent; /* Mantenemos un borde transparente para reservar espacio */
transition: border-color .3s ease, transform .3s ease; /* Transición suave */
}
.product-images .thumb-container.selected {
border-color: #007bff; /* Activamos el color del borde sin cambiar el tamaño */
transform: scale(1.03); /* Ligeramente más grande para resaltar, no afecta el layout */
}
.product-images .thumb-container:hover {
cursor: pointer;
Con este cambio, el border ya está presente (aunque transparente) en todos los estados, por lo que no hay cambio de tamaño al activarse. transform: scale() solo afecta la representación visual del elemento, no su espacio en el layout, así que es seguro de usar para el efecto de zoom.