2

Tenho uma div onde são mostradas as thumbnails ( miniaturas) das imagens e outra div acima com o texto, ex:

inserir a descrição da imagem aqui

Como posso fazer para que ao passar o mouse na thumbnail (efeito hover normal) surja uma div maior que sobreponha o texto e mostre a imagem da thumbnail maior ( que seria o tamanho normal) e ao tirar o mouse da thumbnail a div se oculte normalmente, ex:

inserir a descrição da imagem aqui

Como posso fazer isso?

O HTML seria algo mais ou menos assim:

    <div id="content">

<div id="images-normal">
<img src="#" id="normal-01" />
</div>

<p>Lorem ipsum .... </p>

<div id="images-thumb">
<img src="#" id="thumb-01" />
</div>

</div><!--content-->

1 Resposta 1

1

Podes fazer isso só com CSS.

Por exemplo com este HTML:

<div class="post">
  <div class="texto">Bla bla bla</div>
  <div class="thumb"><img src="/img/logo.png" alt=""></div>
  <div class="imagem"><img src="/img/logo.png" alt=""></div>
</div>

precisas de usar o selector + que seleciona o próximo elemento assim:

.thumb:hover + div.imagem {
  display: block;
}

e dessa maneira quando o .thumb receber hover então o estilo display: block; é aplicado a div.imagem.

jsFiddle: http://jsfiddle.net/vznkdhsy/

Também podes usar opacity em vez de display assim: http://jsfiddle.net/vznkdhsy/1/

9
  • E se forem várias imagens e a div thumb não for "filha" da div maior? Commented 4/12/2015 às 19:11
  • @NGTHM4R3 é dificil responder em detalhe a todos os cenários. Mas mostra o teu HTML e adapto a resposta.
    – Sergio
    Commented 4/12/2015 às 19:12
  • 1
    Ok, vou atualizar a pergunta Commented 4/12/2015 às 19:19
  • A div "images-normal" é a div que irá aparecer no efeito hover e sobrepor o texto que e quando tirar o mouse ela some tbm, essa div maior já teria um tamanho definido e o texto tbm pra não ficar desproporcional, entende... Commented 4/12/2015 às 19:23
  • @NGTHM4R3 nesse caso vai ser preciso JavaScript. Usas jQuery? ou preferes nativo?
    – Sergio
    Commented 4/12/2015 às 19:32

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .