Adicionei um efeito zoom na minha imagem de apresentação. Para isso criei uma class: effect na minha tag img e estilizei da seguinte forma em meu código CSS:
.effect {
/* a propriedade transition é utilizada para suavizar a transição de tamanho da imagem */
transition: all 0.3s ease-in-out;
}
.effect:hover {
transform: scale(1.1);
box-shadow: 0 0 10px whitesmoke;
}
Agora minha imagem é ampliada em 10% quando o usuário passa o mouse sobre ela e uma sombra é adicionada em torno dela para destacá-la.
