COMO FAZER A IMAGEM SUMIR QUANDO PASSA O MOUSE NA SIDE.
No tutorial de hoje vou ensinar a vocês como fazer a imagem sumir quando passa o mouse na side porque muitas pessoas já me pergutaram isso. Pra quem ainda não entendeu o propósito desse tutorial tenho um exemplo aqui (xx). O efeito que vou ensinar hoje é esse que a imagem “some” e aparece outra coisa embaixo. Para aprender a colocar a imagem girando como no exemplo siga esse tutorial (xx). Vamos lá?
Primeiro você tem que colocar uma imagem na side, tenho um tutorial aqui (xx)
Depois de colocar a imagem (vou utilizar a do tutorial que dei pra vocês) vamos colocar o efeito, vamos utilizar a tag #sidebar:hover. #aloha1 img {margin-top:38px;margin-left:75px; width:30px;height:20px;position:fixed;background-color:#fff;}
#sidebar:hover #aloha1 img {-webkit-transition: all 0.9s ease-out;-moz-transition: all 0.9s ease-out;opacity:0;}
Percebam que logo depois de #sidebar:hover eu coloquei o nome da div da minha imagem portanto NÃO RETIREM se não nada vai dar certo. Agora vamos entender esse código. - -webkit-transition: all 0.9s ease-out;-moz-transition: all 0.9s ease-out: é o tempo que vai durar pra sua imagem sumir. - opacity: isso significa que depois que o determinado tempo passar a sua imagem vai sumir, não retirem o 0 se não a imagem não some. .
E pronto, sua imagem vai sumir. Para aparecer outra coisa embaixo apenas basta configurar normalmente o menu ou a descrição e colocar a imagem em cima pois quando passar o mouse ela vai sumir e o que está embaixo vai aparecer. Qualquer dúvida podem perguntar aqui (xx). Dê like ou reblog se for útil e nada de plágios. Bom uso.
