O objetivo do desafio é aplicar um efeito visual interessante quando o usuário passar o mouse sobre um elemento específico da minha página. Posso usar o seletor :hover para isso, personalizando cores, tamanhos e até mesmo adicionando animações simples.
Escolhendo o elemento: Para o meu exemplo, irei personalizar o link para o meu portfólio. Imagine que ele está dentro de um elemento com a classe link-portfolio.
Criando o efeito:
CSS
.link-portfolio:hover { color: #f00; /* Muda a cor do texto para vermelho / background-color: #eee; / Adiciona um fundo cinza claro / text-decoration: none; / Remove a sublinhado padrão / transform: scale(1.1); / Aumenta ligeiramente o tamanho / transition: all 0.3s ease-in-out; / Adiciona uma transição suave */
Ao passar o mouse sobre o link, ele ficará levemente maior, com um fundo cinza e o texto vermelho, criando um efeito visual interessante e chamativo..
