post
Efeito “flutuante” ao passar o mouse em objeto com CSS
Publicado em: 17/05/2021 / Atualizado em: 17/05/2021
Aplicando um efeito de flutuação ou de levitação em um elemento HTML.
Neste efeito, o elemento que você aplicou o efeito sobe ao passar o mouse, e ao retirar o mouse de cima ele desce novamente.
Não importa dentro de qual DIV ou outro elemento HTML pai ele esteja.
O recurso do CSS a ser usado é o translateY.
Abaixo segue um exemplo simples de aplicação:
<p class="objeto-a-flutuar">Olá, estou flutuando!</p>
<style>
.objeto-a-flutuar:hover {
-webkit-transform: translateY(-8px);
-moz-transform: translateY(-8px);
-ms-transform: translateY(-8px);
-o-transform: translateY(-8px);
transform: translateY(-8px);
}
.objeto-a-flutuar {
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
-ms-transform: translateY(0);
-o-transform: translateY(0);
transform: translateY(0);
-webkit-transition: 0.5s;
-o-transition: 0.5s;
-moz-transition: 0.5s;
transition: 0.5s;
}
</style>Observe que no exemplo também adicionei um tempo de 0.5 segundos, para uma transição mais suave, você pode ajustar este tempo para mais ou para menos.
Veja o exemplo funcionando em tempo real: https://replit.com/@brunoalbim/Efeito-flutuante-ao-passar-o-mouse-em-objeto-com-CSS#index.php
Publicações recomendadas:
Inscreva-se em Nossa News:
Seja notificando sempre que tiver conteúdo novo disponível no meu canal do Youtube ou artigo no meu Blog.
Link Curto para Compartilhamento
Compartilhe esse conteudo nas redes sociais ou por mensagem usando o link curto abaixo. Basta clicar em cima do link para copiar.
bruno.art.br/pb/861
ID de Referência: 861
Sugira uma publicação
Envie uma mensagem e sugira um publicação sobre um assunto que tenha dificuldades de resolver.