Efeito dropdown text

Efeito dropdown text
Hoje vou ensinar pra vocês a fazer o efeito "dropdown text". O efeito dropdown é aquele muito usado em menus, que quando você passa o mouse, abrem várias abas embaixo, com mais opções. No caso do dropdown text, ele é apenas para textos. Você escreve um texto e/ou palavra e quando passa o mouse por cima, aparece uma caixinha com uma palavra ou frase, como no exemplo abaixo:

Para fazer esse efeito, copie o código abaixo, coloque em seu css (entre <style> e </style>)

.dropdowntexto {
    position: relative;
    display: inline-block;
}

.dropdowntexto-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    color: #888888;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    padding: 12px 16px;
    z-index: 1;
}

.dropdowntexto:hover .dropdowntexto-content {
    display: block;
}


E o código abaixo onde você quer que seu texto apareça:

 <div class="dropdowntexto">   <span>Passe o mouse aqui bebê!</span>   <div class="dropdowntexto-content">     <p>Escreva um pequeno texto ou observação aqui</p>   </div> </div> 

Facebook Twitter Pinterest Google+ Email Addthis