post

Efeito “flutuante” ao passar o mouse em objeto com CSS

Publicado em: 17/05/2021 / Atualizado em: 17/05/2021

Categorias: BlogCSS

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.

Bruno Devs News


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.

Clique aqui e entre em contato


Comentários