Solucionado
footer {
text-align: center;
background: url("bg.jpg");
padding: 40px 0;
}Pessoal, toda vez que passo o mouse sobre o bloco dos produtos a imagem de rodapé (bg.jpg) se move para baixo, como se o bloco tivesse "empurrando" ela. Já tentei usar background-attachment e background-origin mas não deu certo, continua a mesma coisa. Como solucionar isso?
Olá, Wendell, não sei se entendi bem a sua pergunta, mas isso acontece devido a este estilo aplicado na classe produtos:
.produtos li:hover h2 {
font-size: 34px; /*muda o tamanho do título quando passo o mouse*/
}Ou seja, quando o mouse está sobre um bloco de produto, a fonte do título do produto aumenta e dá uma empurradinha para baixo em tudo o que está abaixo dele, mas quando tiramos o mouse de cima tudo volta ao normal, seria isso?
Acredito que para resolver isso teria que excluir esse estilo, então.
Espero ter ajudado.
Bons estudos!
Oi Leila, sim sim, isso resolve, mas deve ter um método para "fixar" a imagem que está no rodapé, para que ela não seja influenciada pelo bloco de cima, e essa seria minha dúvida mesmo!
Wendell, faça essa substituição no código que resolverá:
.produtos li:hover h2 {
transform: scale(1.1); /*mude o valor dentro do parênteses para o valor que desejar*/
}Lembrando que o "transform" muda apenas o visual do elemento (título - h2) e não ele em si. Por isso o comportamento é diferente de "font-size".
Espero ter ajudado. Bons estudos!
Leila, exatamente isso! Solucionado, muito obrigado!