Solucionado
Fiz um pouco diferente para o efeito do hover. Deixei com o efeito de zoom com o scale e um sombra para sensação de profundidade.
.produto li:hover{
border-color: #c78c19;
transform: scale(1.1);
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
}
Oi Ricardo, tudo bem?
Isso aí! Fazer coisas diferentes do instrutor nos ajuda a praticar melhor.
Parabéns e muito obrigada por compartilhar com a gente o seu código, vai inspirar outras pessoas estudantes :D
Um abraço e bons estudos.
[Sugestão] Efeito zoom no hover com scale + transition
Oi Ricardo, uma boa seria acrescentar o transition no seu código para suavizar a animação do elemento no hover.
.produtos li:hover {
border-color: #c78c19;
transform: scale(1.1);
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
transition: .2s;
}
Poderiam explicar a linha ; box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23); ?
Abs
Olá! Sim claro,
O código abaixo serve para adicionar uma sombra ao redor do elemento, no caso expecífico foi usado para adicionar uma sombra ao cartão sempre que o usuário sobrepor o ponteiro do mouse no Cartão (on mouse hover).
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
A propriedade CSS box-shadow adiciona efeitos de sombra ao redor da moldura de um elemento. Podemos definir vários efeitos separados por vírgulas como no código acima. O primeiro valor refere-se ao deslocamento X (Horizontal) da sombra, o segundo seria o deslocamento Y (Vertical) ambos em relação ao elemento, depois você tem o raio de desfoque, a dispersão e a cor que pode ser representada pelo nome, código hexadecimal, rgb. etc.
Fontes: W3SCHOOLS: https://www.w3schools.com/cssref/css3_pr_box-shadow.php MDN https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow
Abraços,
Obrigado pela explicação! Achei este site em uma publicação do forum que pode ser util, abs
Boa, obrigado por compartilhar.
Caramba, show de bola! Gostei das sugestões pessoal! Muito obrigado!!