Como fazer uma animação com HOVER usando apenas HTML e CSS
Вставка
- Опубліковано 7 лют 2025
- Olá, pessoal!
Nesse vídeo vou te mostrar como criar uma incrível animação com hover para seus cards, usando apenas CSS!
A animação de hover é uma forma de adicionar interatividade e dar vida ao design do seu website. Com apenas algumas linhas de CSS, você será capaz de criar uma transição suave e elegante que vai impressionar os visitantes do seu site.
Durante o tutorial, vamos guiar você passo a passo por todo o processo de criação da animação. Desde a estrutura HTML básica do card até a aplicação das propriedades CSS necessárias para gerar o efeito hover desejado.
Código-fonte estará disponível para download no GitHub:
github.com/Lar...
Redes sociais:
LinkedIn: Larissa Kich
Instagram: @lariikich
Inspiração:
• CSS Animated Responsiv...
PQP to tentando fazer essa joça a DIAS, VLW DEMAIS Larissa me salvou muito!
oi estou começando com o html e suas aulas estão ajudando muito! parabéns e obrigado.
Poxa! Além do conteúdo ser muito interessante, o vídeo é super agradável de assistir. 🙂
obrigado ai Larissa pela essa aula que como sempre me ajudou mto
Top de mais, parabéns 👏🏽👏🏽👏🏽
Ameiiiii o vídeo, bem explicado e com muita qualidade. Parabéns
tudo isso em menos de 13 minutos, show dms
Muito obrigada 😊
Muito bonitinho, já vou tirar um tempinho pra treinar essa animação
Muito obrigada, fico feliz que tenha gostado 😊❤️
Arrasou eu amei demais 😍
Muito obrigada 😊
Parabéns, muito didático
Muito bom conteudo estou aprendendo mt com vc praticando os login form que vc ensinou , tenta trazer clones de site para praticar o header , css grid , position etc... seria interessante!
Oii, muito obrigada pela sujestão, vou fazer sim 😊
Muito bom. Ver vc fazendo parece facil, mas esse negocio é dificil de mais. kkkkk
Aprendendo muito fácil
Um dia chego no seu nível!!
Haha muito obrigada, bons estudos ☺️
Arigathanks!
top demais... Muito boa a dica.
Muito obrigada ☺️❤️
Dica sensacional!!!
Que bom que gostou ☺️
Kich, vc éh F#d@!!! Parabens!!!
Muito muito obrigada ☺️
Muuito bom
Te amo sz
caraca isso e top demais, vou usar isso em meu portifolio kk
Muito obrigada, espero ter ajudado ☺️
@@larissakich tu ajuda demais ,ainda mais que explica super bem ,consigo entender tudo ,obrigado😁
o meu ta dando erro, o CSS não recarrega no navegador, quando eu inspeciono a pagina do navegador aparece a frase "upgrade your browser, this browser is not supported websocket for live reloading" ja tentei de tudo e não consigo solucionar isso
Larissa, eu estou fazendo uma tabela, e quando eu faço o top: ' ', todas as palavras se acumulam no topo da pagina, tem um jeito de fazer cada palavra ficar dentro de cada quadrado da tabela?
amei ficou muito bom, queria fazer 3 desses um do lado do outro so nao sei como
só copiar e colar o codigo um de baixo do outro, ai vc troca só oq ta escrito e as imagens!
@@dionikkj já fiz , porém tive que fazer de outro modo. Tive que mudar algumas coisas do código para ficar alinhado um do lado do outro
top....
Muito obrigadaaa!
top
Muito obrigada 😄
o meu esta dando algum erro que não identifiquei, ja analisei o video passo a passo, verifiquei cada pontinho, cada sinal, e não funciona.
poderia me ajudar?
Edit ( achei o erro, era um aspas simples ' dps de uma aspas dupla " antes de img, na class img-box, se liga no exemplo ...(class=" 'img-box")..., acho que minha auto avaliação esta ruim kkkkkkkk)
Oii, desculpa a demora, que bom que conseguiu encontrar o erro 😄
nossa top , como se aprenderu tudo isso ai ?
Tão pequeno que quase não dá pra ver. Mas interessante!
Boa tarde Larissa,
Vamos fazer uma parceria de video aulas.
Tbm faço videos.
Pensa ai e me responde depois.
Oii, claroo, me chama no Instagram @lariikich
vc já trampa na área?
Oii, sim trabalho a 2 anos como fullstack