post
Efeito “flutuante” ao passar o mouse em objeto com CSS
Publicado 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
Link de 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 para mim, e sugira alguma publicação de algum tema que tenha dificuldades de resolver.