Olá lojista, tudo bem?
As vezes é satisfatório colocar um efeito a mais no site de acordo com a interação do usuário. Claro que não é necessário, mas a depender do público pode te fato fazer sentido, no exemplo a seguir, coloco uma transição lenta e com pouco zoom da imagem e isso pode ser realizado através do código abaixo:
.banners-grid .banner:hover {
transform: scale(1.03);
transition: all 0.8s ease;
}
Sem o zoom:
Com o zoom:
No caso o banner central, está um pouco maior que os laterais, caso queira um efeito maior, basta editar a propriedade scale, colocando um número maior, veja:
No exemplo a seguir, mudei de 1.03 para 1.13 e veja a diferença:
Basta colocar agora o tamanho que desejar para criar um efeito mais visual para sua loja!