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

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