Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

natanpereira93

Imagem aparecendo após passar o mouse sobre um texto (ou link)

Recommended Posts

Galera, sou meio novato na área.

 

Estou fazendo um site para uma pizzaria e preciso que ao passar o mouse encima de uma pizza no cardápio do site (texto) aparece a imagem da pizza relacionada...

 

Alguém sabe um código bem simples pra não me dar dor de cabeça?
Sei que é algo com o hover mais tentei vários exemplos e nenhum deu certo.

Qualquer ajuda é válida.

 

Obrigado desde já!

 

Compartilhar este post


Link para o post
Compartilhar em outros sites
Em 01/11/2017 at 17:21, Aphrodi disse:

tem a base do site pronta? pode me mostrar para fazer o efeito?

 

Então, eu uso o tema Divi, o site é pizzariaestella.com.br 
no cardápio lá embaixo preciso fazer este efeito...

Compartilhar este post


Link para o post
Compartilhar em outros sites

  • Conteúdo Similar

    • Por 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

    • Por 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 :)
    • Por 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.
    • Por Gabriel Barros Santana
      Oi, estou com uma duvida. Estava criando um meno de categorias para um site e-commerce na tray.
      Porém estou lutando para editar na plataforma da tray. Tenho um menu horizontal com os subníveis vertical porém queria editar para alterar o estilo e conteúdo mas a tray ta sendo bem estranha para mim alguma ajuda ? 
       
      Queria mudar desse menu hover normal de lista do site "JP" pra esse mais dinâmico com um caixa maior e com foto de produtos como exemplo do site "casas bahia".
       


    • Por xDenisX
      Olá pessoal tudo bem ?
       
      Gostaria de adicionar uma borda a um objeto passando o mouse em cima do mesmo usando o parâmetro hover sem que alterasse a posição dos outros ao lado ( sem ficar tremendo o layout)
       
      abaixo está o código. Alguém consegue me dar uma ajuda ?
       
      <html> <head> <title></title> <style type="text/css"> .quadrado{ width: 100px; height: 100px; background-color: grey; display: inline-block; margin:2px; } #container{ width: 320px; } .quadrado:hover{ border: 4px solid black; box-sizing: border-box; } </style> </head> <body> <div id="container"> <div class="quadrado">Primeiro</div> <div class="quadrado">Segundo </div> <div class="quadrado">Terceiro </div> <div class="quadrado">Quarto</div> <div class="quadrado">Quinto</div> <div class="quadrado">Sexto</div> <div class="quadrado">Sétimo</div> <div class="quadrado">Oitavo</div> <div class="quadrado">Nono</div> </div> </body> </html>  
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.