Disposição Banners

Storefront (loja)
#1

Olá mais uma vez, rs. Obrigado pelo suporte, queria ter mais conhecimento pra não ficar criando tanto chamado, rs. Mas vamos la.

Queria que apenas esses banners marcados nas fotos em anexo, fossem exibidos da forma que mostrei na montagem na minha versão mobile. A versão desktop ta ok a disposição, queria apenas verificar a possibilidade de na versão desktop ao passar o mouse por cima, a imagem ter o mesmo efeito que tem no carrossel de produtos, que parece 1 leve zoom.

A formatação de exibição no mobile seria apenas pra esse conjunto de banners, digo isso pois devo criar uma sequencia normal de banners depois, com a formatação padrão. Abraços

Banners-desktop
Banners-desktop1422×927 137 KB

banners-mobile
banners-mobile591×1280 181 KB

1 curtida
#2

oi, tudo bem @catclub ?

Vá no CMS em Layout > Inserir código e no último quadro, coloque o código abaixo:

.banner picture img:hover {
  -moz-transform: scale(1.1);
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
}

Dá uma olhada se o zoom esta ok.

Abraço!

#3

O zoom ficou ótimo, e a diagramação na versão mobile desse grupo de banners, conseguimos também?

#4

reparei que o zoom ocorre no banner principal também, na verdade queria só nesses 6 menores de categorias =D

#5

Altere para:

.banners-grid .banner picture img:hover {
  -moz-transform: scale(1.1);
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
}
#6 
@media(max-width: 480px) {
  #page-home .banners-grid .container .col-12 {
  max-width: 33.333%;
  flex: 0 0 33.333%
  }
}
#7

meu site vai ficar lindão, obrigado pelo suporte. E olha que não manjo nada de programação, sem um suporte com essa abertura jamais seria possível ir tão longe, só contratando uma agencia mesmo.

2 curtidas
#8

De nada @catclub !