4

Preciso criar um banner em HTML/CSS que use apenas duas imagens em JPG/GIF. A primeira imagem terá 300x250px e a segunda imagem 600x250px. Será exibida a primeira imagem e ao passar o mouse por cima será expandida e exibirá a segunda imagem.

Ao exibir a segunda imagem, a mesma precisa ter um link externo.

1 Resposta 1

1

Você pode fazer isso através de Fade in Overlay, com CSS e HTML. Execute o código a baixo e veja como funciona.

.container {
  position: relative;
  width: 50%;
}

.image {
  display: block;
  width: 100%;
  height: auto;
}

.overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  transition: .5s ease;
  background-color: #FFFFFF;
}

.container:hover .overlay {
  opacity: 1;
}

.text {
  color: white;
  font-size: 20px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
}
<h2>Fade in Overlay</h2>
<p>Passe o mouse sobre a imagem para ver o efeito.</p>

<div class="container">
  <img src="http://lorempixel.com/output/nightlife-q-g-300-250-1.jpg" alt="Avatar" class="image" />
  <div class="overlay">
    <a href="#linkparaoutrapagina"><img src="http://lorempixel.com/output/city-q-g-600-250-10.jpg" alt="Avatar" /></a>
  </div>
</div>

As imagens utilizadas tem as dimensões que você citou e na segunda imagem basta inserir o link na propriedade href.

6
  • Olá Pedro, obrigada pela resposta. Ajudou muito, porém as imagens estão muito grandes. Não teria como definir melhor pra não ficar só em porcentagem? Pois preciso seguir um padrão, onde a primeira imagem deve ter 300x250px e a imagem expandida deve ter 600x250px.
    – mab
    8/06/2017 às 20:28
  • Olá Maíra, as imagens utilizadas tem exatamente essas dimensões que você está falando 300x250 e 600x250 consecutivamente. Mas respondendo a sua pergunta, sim pode fixar um tamanho para padronização, basta criar uma classe CSS aplicando as propriedades width e height com os tamanhos desejados. 8/06/2017 às 20:33
  • Pedro, com o exemplo enviado, a imagem de 300x250 fica muio estourada, muito além do tamanho original. Por isso perguntei. Vou tentar novamente com essa sugestão. Obrigada.
    – mab
    9/06/2017 às 15:21
  • Olá Pedro, para funcionar isso, o espaço total do meu banner deve ser 600? Pois na atual estrutura do meu site, ele mostra a transação de uma foto para outra, porém não expande para fora da minha div de 300px. Vejo a troca das imagens apenas dentro do quadrado de 300x250.
    – mab
    13/06/2017 às 20:18
  • @MaíraB Você precisa exibir uma imagem de 600x250 em um espaço de 300x250 é isso? Ela seria redimensionada? 13/06/2017 às 20:35

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 .