Ir para conteúdo

Arquivado

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

Newton

Passsar mouse sobre imagem e exibir uma outra imagem ao lado

Por , em Desenvolvimento frontend

Recommended Posts

Newton    0

Newton
Postado

Olá a todos

 

Tenho uma dúvida, e espero que alguém possa me ajudar.

 

Preciso criar a seguinte situação: São 4 imagens do lado esquerdo e do lado direito, uma maior que mudará quando passar o mouse sobre as imagens do lado esquerdo, como exemplifico na imagem abaixo:

 

t71no0.jpg

Tenho o seguinte código, mas ele esta exibindo a imagem em cima da outra:

<div id="cf">
  <img class="bottom" src="imagem1.jpg" />
  <img src="imagem2.jpg"/></td>
</div>
<style>
#cf {
  position:relative;
  height:300px;
  width:347px;
  margin:0 auto;
}

#cf img {
  position:absolute;
  left:0;
  -webkit-transition: opacity 1s ease-in-out;
  -moz-transition: opacity 1s ease-in-out;
  -o-transition: opacity 1s ease-in-out;
  transition: opacity 1s ease-in-out;
}

#cf img.top:hover {
  opacity:0;
}
</style>

Compartilhar este post

Link para o post
Compartilhar em outros sites

_leandromateus    0

_leandromateus
Postado 

<!DOCTYPE html>
<html>
<head>
  <title></title>
<style type="text/css">
  .imgBig { display: none;}
  .imgThumb { float: left;}
  .img { width: 320px; position: relative;}
   .img:hover .imgBig { display: block;}
   .imgBig { position: absolute; left: 300px;}

</style>
</head>
<body>
  <div class="wrapper">
    <div class="img">
  <img class="imgThumb" src="image1.jpg" width="150px" height="150px" />
  <img class="imgBig" src="image1-b.jpg" width="300px" height="300px" />
    </div>
    <div class="img">
  <img class="imgThumb" src="image2.jpg" width="150px" height="150px" />
  <img class="imgBig" src="image2-b.jpg" width="300px" height="300px" />
    </div>
    <div class="img">
  <img class="imgThumb" src="image3.jpg" width="150px" height="150px" />
  <img class="imgBig" src="image3-b.jpg" width="300px" height="300px" />
    </div>
    <div class="img">
   <img class="imgThumb" src="image4.jpg" width="150px" height="150px" />
   <img class="imgBig" src="image4-b.jpg" width="300px" height="300px" />
    </div>
  </div>
</body>
</html>

Newton,

 

dá uma olhada neste código acima, veja se ele te ajuda no que quer ai só será arrumar o css como quiseres, eu refiz o código a a ideia que você queria como ficasse.

 

qualquer duvida posta aqui.

 

Espero ter ajudado.

 

 

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Desenvolvimento frontend
×

Informação importante

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

  Aceito