Jump to content
Sign in to follow this  
Vini Martins

Aparecer ao passar o mouse por cima

Recommended Posts

Olá galera, então estava fuçando um site e achei bem bacana algo que ele faz, pode parecer muito simples, mas gostei muito!

O site é http://descomplica.com.br/, rolando um para baixo podemos ver que tem uma categoria Disciplinas, e que ao passar o mouse por cima, aparece um certo tipo de conteúdo, com opacidade.

Eu estava querendo utilizar o mesmo método, uma vez que passar o mouse por cima, aparecerá algo por cima.

Share this post


Link to post
Share on other sites

 

Se deu ao trabalho ao menos de entrar no site?

 

Pior que sim, acredita?

E você, chegou a ler os links que passei?

Pois bem, você vai ter duas divs, uma em cima da outra como se fosse uma máskara por cima, define a cor que quer como fundo e coloca a opacidade.

Defina que o display dessa mascara será none a princípio e ao hover da div por baixo, o display da máscara é block

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

  • Similar Content

    • By andre2654
      Bom dia, peço humildemente a ajuda de vocês,
      Enfim, estou fazendo um exemplo de site, só para teste mesmo, onde terá uma janela principal perguntando em qual site a pessoa quer ir(1 só empresa, porém dois negócios) ai se a pessoa clicar em alguma das melecas, quero que ela abra mostrando o site, ou só uma imagem mesmo

    • By Pablo Bernardo
      Há alguma maneira de esconder o mouse e fazer com que só seja possível a navegação através das "setinhas" do teclado?
      Gostaria de fazer uma especie de rodapé que seja controlado pelas "setinhas" e ao clicar com "enter" teria a mesma função que clicar com o mouse
    • By lordgreen
      Olá, andei procurando e não encontrei exatamente o que preciso então, talvez alguém possa me ajudar.
      Eu quero colocar um site em modo horizontal e não consigo pensar em como fazer isto. Deixe-me explicar melhor, tenho uma imagem com altura de 960px e largura de 5000px, ponho ela como background da página e fica a barra em baixo e não em cima, gostaria de saber como mover essa barra para o lado com a roda do mouse (no ato do scrolling). 
      Deve ser uma coisa bem simples, porém realmente não consigo fazer e não encontro exatamente o que procuro na internet, só encontro como colocar menu na horizontal, enfim.
       
      Obrigado a todos.
    • By petrochinski
      Eu tive uma ideia muito boa, mas não consegui fazer ainda.
       
      A ideia é simples, eu tenho um botão escrito 'Contato', quando passar o mouse gostaria que ele "abrisse" uma div logo abaixo (dropdown), como por exemplo aparecer o telefone somente se passar o mouse.
       
      Não achei nenhum tópico com essa ideia... é que gostaria de fazer sem utilizar nav, pois nav é o menu, e a ideia inicial é de fato ser um botão que aparece as informações quando se passa o mouse.
       
      Grato :)
    • By AsxCle
      Olá pessoal
       
      Estou com problema ao utilizar o hover, criei um botão que tem uma imagem como background, queria que toda vez que eu passar o mouse, o botão ficaria escuro, ou seja, diminuiria a transparência do mesmo. Já tentei colocar um segundo background com opacidade de 0, e quando passasse o mouse, opacidade ficaria 1, mas não deu certo. Poderiam me ajudar?
       
      HTML
       
      <!DOCTYPE html>
      <html lang="pt-br" dir="ltr">
        <head>
          <meta charset="utf-8">
          <title>--.--</title>
          <link rel="stylesheet" type="text/css" href="--..--.css">
          <!--<link href="css/hover.css" rel="stylesheet" media="all">-->
        </head>
        <body>
          <h1 id="pcp"> 選べ </h1>
          <button class="first">
          </button>

        </body>
      </html>
       
      CSS 
       
      .first {
          background-image: url(001-T.png);
        }
       
      Tudo que eu tentei não deu certo, já criei até um subclass com :before, mas em vão, então só restou isso do css, pois é o background.
×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.