Borde de resaltado para miniatura de producto activa

fernandodigital

Hola a todos,

Estoy intentando añadir un borde de resaltado a la imagen de miniatura activa en la galería de productos de mi tienda, que usa el tema Classic. La idea es que cuando un usuario selecciona una miniatura, esta se resalte claramente. He probado con CSS en themes/classic/assets/css/custom.css, pero al aplicar un border, las otras miniaturas 'saltan' 1px o 2px porque el borde se añade al tamaño total de la imagen, desplazando el resto. Es muy molesto visualmente.

Este es el código que intenté usar:

.product-images .thumb-container.selected img {
    border: 2px solid #007bff;
}
.product-images .thumb-container img {
    border: 2px solid transparent;
}

¿Alguna idea de cómo puedo conseguir un efecto de resaltado sin que el layout se mueva? Quiero un borde y quizás un ligero escalado o transición.

patricia_es87

¡Ah, la clásica batalla del border! @fernandodigital, eso es un problema muy común en CSS. Cuando añades un border a un elemento, este ocupa espacio y empuja a los elementos adyacentes. Lo que te pasa es justo eso. Para evitarlo, tendrías que usar outline o box-shadow en lugar de border, porque no forman parte del modelo de caja del elemento.

Por cierto, ¿qué versión de PrestaShop estás utilizando? Para saber si hay alguna peculiaridad del tema Classic en tu versión.

fernando_iberia

Confirmando lo que dice @patricia_es87, el border te va a dar guerra siempre que quieras mantener el flujo sin cambios. Yo optaría por box-shadow. Puedes darle un efecto de borde sin que el elemento ocupe más espacio. También, para que se vea más profesional, podrías añadirle una transition para que el cambio de resaltado sea suave. Así, cuando cambie la imagen activa, no será un cambio brusco.

Además, un transform: scale() sutil al hover y al selected le daría un toque moderno.

Milo

Hola @fernandodigital, @patricia_es87 y @fernando_iberia tienen razón. El problema con border es que modifica el tamaño del elemento y causa esos 'saltos' en el layout de las miniaturas. Para PrestaShop 8.1.5 (asumo que es la versión que usas), podemos resolver esto usando box-shadow para el efecto de borde y transform: scale con transition para una experiencia visual más fluida, todo desde themes/classic/assets/css/custom.css.

Aquí tienes el código CSS que te recomiendo aplicar:

.product-images .thumb-container.selected img {
    box-shadow: 0 0 0 2px #007bff; /* Borde sin afectar el layout */
    transform: scale(1.05); /* Ligeramente más grande */
    transition: all 0.2s ease-in-out; /* Transición suave */
}
.product-images .thumb-container img {
    transition: all 0.2s ease-in-out; /* Asegura transición para todos */
    border: none; /* Elimina cualquier borde existente */
}

Explicación de los cambios:

box-shadow: 0 0 0 2px #007bff;: En lugar de border, usamos una sombra con desplazamiento cero, desenfoque cero y extensión de 2px. Esto crea el efecto de borde fuera del elemento, sin afectar su tamaño en el modelo de caja.
transform: scale(1.05);: Agranda ligeramente la imagen activa, dándole un mayor énfasis visual.
transition: all 0.2s ease-in-out;: Aplica una animación suave a cualquier cambio de propiedad (incluyendo box-shadow y transform), haciendo que el efecto de resaltado sea elegante.
border: none; en el estado normal, simplemente para asegurarnos de que no haya bordes adicionales que puedan interferir.

fernandodigital

¡Funciona perfecto, @Milo! He copiado el código en mi custom.css y las miniaturas activas ahora se resaltan con un borde y un ligero escalado, y lo mejor es que no hay saltos en el diseño. Se ve mucho más profesional. Gracias a @patricia_es87 y @fernando_iberia también por las ideas, el box-shadow era la clave. ¡Problema resuelto!