Solucionado
Apliquei o seletor Hover na minha imagem, criei uma classe e fiz assim:
.imagem-exclusiva { width: 100%; max-width: 400px; border-radius: 10px; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); transition: transform 0.3s ease, box-shadow 0.3s ease; }
.imagem-exclusiva:hover { transform: scale(1.05); box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4); }
Link: https://claudiolima436.github.io/Portifolio-HTML-e-CSS-aula_5/
Oii, Claudio!
Seu efeito hover ficou muito bom! A transição suave e o aumento do box-shadow criam um destaque visual bem interessante na imagem.
Para saber mais:
Você sabia que o CSS também pode ser usado para criar efeitos de gradiente linear sem a necessidade de imagens externas? Isso pode ser feito utilizando a função linear-gradient(). Esse efeito cria transições suaves entre duas ou mais cores, o que é ideal para backgrounds modernos e dinâmicos. Veja como usar:
div {
background: linear-gradient(to right, #ff7e5f, #feb47b);
height: 200px;
width: 100%;
}No exemplo acima, o gradiente cria uma transição de cor do laranja mais escuro ao laranja mais claro, e é aplicado diretamente no fundo de um elemento div, sem a necessidade de carregar imagens externas. Gradientes são ótimos para criar efeitos visuais impressionantes com pouca sobrecarga de recursos.
Para aprender mais sobre gradientes e explorar outros tipos de gradientes, consulte esta documentação sobre gradientes lineares no MDN.
Conte com o apoio da comunidade Alura na sua jornada. Abraços e bons estudos!