Post sobre |Dicas blog, Pc windows

Aumentar a imagem ao passar o mouse, com Css

Esse CSS permite 'aumentar a imagem' ao passar o mouse, fácil de costumizar, melhor que um JavaScript por que pode ser usado nos posts do BlogSpot e é acessível a quem não tem o Java ativado por algum motivo, pode ser mais leve para carregar a página também, em alguns casos.
Esse artigo é para pessoas que já entendem Css e Html.

imagem que muda e redimensionada para um tamanho grandeimagem que muda e redimensionada para um tamanho grande

Veja outros exemplos ou problemas, clique aqui

Vou colocar de modo simples primeiro, para quem só quiser pegar o código, e depois mais abaixo vou mostrar algumas opções para mudar a forma como ele se comporta.

Eu usei cores para explicar e tornar mais fácil para quem não tem intimidade com códigos, por exemplo: as tags com esse fundo provavelmente já existem no seu blog e não é bom repeti-las, eu só coloquei elas para as pessoas se situarem, mais ou menos, do local onde deve ser colocado o código.

Se você acha difícil e não gosta muito de códigos, pode simplesmente copiar os códigos fazendo apenas a mudança na 2ª parte, nos endereços e se quiser também tamanhos das imagens:
A 1º parte deve ser colocada dentro do HTML do blog ou página, entre as tags
<HEAD>
Como aqui, entre as tags com essa cor, mas não copie as HEAD se já existirem, só coloque em algum lugar entre elas(o código abaixo), se não está habituado a fazer isso, faça antes uma cópia(backup) de seu código, para eventual problema.
</HEAD>

1ª parte entre as HEAD do html:
<HEAD><STYLE type='text/css'>
.aumentaIMG A SPAN{DISPLAY: none;}
.aumentaIMG A:hover SPAN{background:#ffffff; position: absolute;DISPLAY: block; z-index: 100;}
.aumentaIMG A:hover EM{z-index: 1; DISPLAY: none;}
.aumentaIMG A IMG { BORDER: #000 1px solid;}
.aumentaIMG A:hover IMG { BORDER: #000 1px solid;} </STYLE>
</HEAD>

Agora a segunda parte quando você postar as imagens, ou se você cria suas páginas individualmente é entre as tags <BODY> </BODY>

2ª parte no post:

No blogger em postagem, criar um post e opção Editar HTML do post, um alerta, alguns sistemas como o blogger, as vezes, transformam as maiúsculas em minúsculas ao adicionar códigos, sendo assim, todos os nomes da classe aumentaIMG deve ser colocada em minúsculo.

<div class="aumentaIMG"><A href="#">
<EM><IMG alt="descreva AQUI sobre o que eh sua imagem" src="http://NOMEsite.com/ENDERECO_DA_IMAGEM.XXX" width="382px" height="85px" />
</EM><SPAN>
<IMG alt="descreva AQUI sobre o que eh sua imagem" src="http://NOMEsite.com/ENDERECO_DA_IMAGEM.XXX" width="720px" height="160px"/> </SPAN></A></div>

Usando a tag EM sobre a 1ª imagem link, fará com que o DISPLAY: none; usado no css A:hover EM atue fazendo a imagem "sumir" ao passar o mouse e dar lugar a imagem que está dentro da tag SPAN, que é a mesma porém com tamanho(width, height) maior.
Se você não utilizar as tags EM a imagem aparecera abaixo da outra ou se você especificar outro local para ela.

Outra coisa interessante é position: absolute;z-index: 100; que fará com que a imagem fique sobre outros elementos, pode ser substituído por position: relative; e poderá muitas vezes "empurrar" outras imagens ou elementos para ter seu espaço.

Passe o mouse nas imagens para aumentar

Primeiro exemplo uma imagem grande que foi dimensionada para pequena e ao passar o mouse vai ao tamanho normal, sem o uso das tags <EM> a imagem que deveria sumir ao passar o mouse não some.

imagem grande que foi redimensionada em para um tamanho pequenoimagem grande que foi redimensionada em porcentagem para um tamanho normal

Segundo exemplo; uma imagem pequena que poderia ser aumentada, mais, por achar interessante esse exemplo, resolvi fazer um efeito mudar imagem ao passar o mouse, com o uso das tags <EM> para esconder a imagem-link. Além disso a imagem que aparece é aumentada:

imagem que muda e redimensionada para um tamanho grandeimagem que mudará e redimensionada para um tamanho grande

41 comentários:

Aumentar a imagem ao passar o mouse, com Css2008-09-09T05:34:00-03:00
  1. Desculpe minha ignoracia, mas na parte de html do meu blog, achei varios head ... e ai nao sei em qual coloco o codigo depois ... se puder da um alo da resposta no meu blog www.livrodegraca.blogspot.com
    obrigado

    Responder
  2. Anônimo30/6/09

    Muito booom caraaa!
    amei ~
    curti demáás!
    Obrigadaaa pela dica

    Responder
  3. Tem como colocar link sem perder o efeito ?

    Responder
  4. eddy

    Tem sim, mas, você deve perceber que isso é uma coisa bem complicada, você deve entender um pouco de códigos, e, em um editor html(assim como o editor de postagem do blogger) é bom fazer utilizando a parte Editar Html, ou esses editores podem "quebrar o código"

    O link é nesta parte do código:
    <A href="">

    Por exemplo, se eu quisesse um link para home desse blog eu usaria o trecho de código acima(que já existe) e adicionaria entre aspas o endereço do blog, parte do código referente ao link ficaria parecido com isso:
    <A href="http://blog.foitestado.com/">

    Responder
  5. Anônimo10/3/10

    Oi amigo, achei muito massa o efeito, mas eu gostaría de saber se tem como fazer isso com swf?
    ABS!
    Aguardo reposta

    Responder
  6. Anônimo

    É possível, você precisa substituir na parte do Html após a <body> onde tem os códigos de imagem por outro elemento/objeto, porém, é bom cautela sempre que pensar em efeitos, essas coisas as vezes pesam pela quantia de código, se for um objeto que fica se atualizando automaticamente(como um chat em flash) poderia ser o dois objetos usando a conexão e prejudicando usuário e consequentemente o site/blog.

    O Css continua o mesmo. Faz um teste, crie em seu computador um arquivo .html com os códigos acima substituindo os elementos <IMG src="....."/> por um com swf e as tags de tamanho para ver como funciona

    Responder
  7. Olá sou o Marcos, estava procurando informações sobre como colocar "div" lado a lado e encontrei este site e gostei muito das informações, usei as dicas de aumentar imagens ao passar o mouse e funcionou.
    Parabéns pela postagem e obrigado.

    Responder
  8. Anônimo9/5/10

    deu certo criei uma div e coloquei todo o conteúdo
    criei um arquivo .css externo agora não altera mais o conteúdo

    Responder
  9. Olá!

    Adorei o efeito, porém no meu site a imagem grande aparece só no lado esquerdo e preciso que a maior apareça do lado direito quando coloco o mouse em cima... como faço?

    Responder
  10. Anônimo

    Realmente não lembro se funciona ou não em arquivo externo, deve levar em conta outros estilos, por Expl, o blogspot usa outras folhas de estilo do blogger.

    Carla Konig

    Talvez a primeira imagem tenha algum Css de alinhamento como float:right; ou ambas as imagens estão em uma div ou elemento com text-align:left;

    Outra coisa a se observar, é, mesmo que eu quisesse, nos meus exemplos acima as imagens talvez não poderiam ficar mais do lado esquerdo pois já é outra div(lateral)

    Responder
  11. Olha por gentileza alguem poderia me informa como e este código ou como posso acha-lo?

    Ele deixa a tela escura ao clicar e aparece a foto maior veja

    http://letras.terra.com.br/evanescence/fotos/

    Responder
  12. stylebrabus-n85

    Nesta site aqui, para usar é simples, basta saber o básico do Html, que é adicionar um script e Css externo e adicionar imagem com link em Html.

    Porém, você vai perceber que são arquivos pesados e, isso somado ao peso das imagens deixa a página muito pesada, os problemas que isso causa vão desde algumas pessoas não gostar até a mau posicionamento nas pesquisas do google.

    Responder
  13. Muito obrigado amigo. Que Deus te ilumine sempre.

    Responder
  14. Anônimo8/7/10

    Muito bom viu.. me ajudou bastante no desenvolvimento da minha pagina.....

    Parabéns! Se vc tiver novidades posta no site pra gente!!! Valeu !!


    Andreza

    Responder
  15. como colocar no blog amigo . não consigo

    Responder
  16. biiel

    É bom você ver que a imagem talvez não saia fora do post, a largura dela se limita a isso, e, também é bom fazer isso usando um blog de testes e praticar e aprender um pouco de html par ter mais facilidade.

    A primeira parte do código é Css para adicionar entre as tags Head da página, no caso do blogger a primeira parte pode seguir esses passos:

    Blogger.com >Design >Editar Html e encontrar a tag </head> e colocar exatamente antes/acima dela a primeira parte do código

    ou pode copiar o código da primeira parte e retirar as linhas abaixo:
    <HEAD>
    <STYLE type='text/css'>

    </STYLE>
    </HEAD>


    Se você retirar essa parte indicada você fica só com a estilização, ai você pode adicionar logo acima de
    ]]></b:skin>

    A segunda parte do código você pode adicionar na parte Editar Html da postagem

    Responder
  17. Obrigado!! Era isso que eu procurava! Vlw!!!

    Responder
  18. Adorei so que não consegui colocar no meu site me ajudem!

    Responder
  19. Anônimo31/8/10

    Boa tarde! Fiz e deu certo o efeito, só que quando passo o mouse só aparece embaixo. Gostaria de saber como faz para a figura maior aparecer do lado ou em cima da foto e não embaixo, senão dá rolagem.

    Obrigada!

    Att,
    Heloisa.

    Responder
  20. Anônimo, Heloisa

    Não tenho certeza que irá funcionar, mas se você considera importante, deve testar as intruções abaixo, é bom ter um certo conhecimento em Html

    Para que a imagem maior fique acima pode tentar, na 2ª parte(html) colocar o código que está dentro e com SPAN antes da primeira imagem e sem o uso das tags <EM>

    Mais ou menos assim:

    <div class="aumentaIMG"><A href=""><SPAN><IMG alt="descreva AQUI sobre o que eh sua imagem" src="http://NOMEsite.com/ENDERECO_DA_IMAGEM.XXX" width="720px" height="160px" /> </SPAN><IMG alt="descreva AQUI sobre o que eh sua imagem" src="http://NOMEsite.com/ENDERECO_DA_IMAGEM.XXX" width="382px" height="85px" /></A></div>

    ________________________


    Para que a imagem maior, ou seja a segunda imagem fique ao lado da primeira você pode tentar:

    Na 1ª parte do código, que é o css, substituir DISPLAY:block; por display:inline

    Depois, na 2ª parte, que é o Html, adicionar style="float:left;" na primeira imagem, ficaria parecido com <IMG style="float:left;"

    Responder
  21. Existe outra coisa q eu tb procuro saber cm fazer há já algum tempo, ou seja, eu queria passar o mouse sobre uma imagem e q me aparecesse um quadro com texto referente a essa msm imagem.
    Por ex., colocar a foto de uma capa de um livro e ao passar o mouse surgir uma caixa c a sinopse desse msm livro, será q tb me conseguirá ajudar nisso?
    Deixo um blog cm exemplo:
    http://paginasdesfolhadas.blogspot.com/

    Responder
  22. °•·.๓คятค

    Posso ver isso, mas, não vou me basear em código de um blog, mas, vou me basear neste mesmo estilo Css desta postagem ou algo parecido, porém, tenho outro post em andamento e vai demorar uns quatro dias.

    Responder
  23. consigui o mesmo efeito da EM, com esse codigo

    #noticia_imagem a span{
    display:none;
    }
    #noticia_imagem a:hover span{
    display:block;
    position:absolute;
    z-index:100;
    }
    #noticia_imagem a img{
    float:left;
    border:1px solid #CCC;
    }
    #noticia_imagem a:hover img{
    border:1px solid #CCC;
    }

    Responder
  24. Ajudou muito obrigado pelo codigo abraço!

    Responder
  25. Anônimo15/4/11

    Olá tudo bem?
    eu achei seu codigo muito bom, mais quando eu coloquei o código apareceu a barra de roalamento, sabe mesmo quando eu so usei uma foto, ao final de contas a figura q eu coloquei esta bem bem no começo, como eu faço para q a barra de rolamente apareça ou desapareça de acordo a quantidade de foto?
    obrigado e aguardo resposta.

    Responder
  26. Anônimo

    Não entendi muito bem, mas se você se refere a barra de rolagem lateral do navegador, essa sempre aparece quando a soma da altura dos elementos dentro da página são maiores que a altura interna da janela do navegador, na largura vale o mesmo mas a barra aparece embaixo.

    Se a barra de rolagem aparecer dentro da página, isso significa que existe um elemento configurado para que isso aconteça, esse elemento geralmente é uma DIV, essa div pode estar com um estilo configurado(estabelecido) para ter uma barra de rolagem, altura e largura, quando isso ocorre a barra de rolagem aparece quando você adicionar dentro dela alguns elementos que tenham ou somam medidas maiores que a dela.

    O código Css para a barra de rolagem aparecer é overflow:auto; e se você não quiser que uma div tenha deve saber qual é ela e retirar essa parte, geralmente estará no Css ou Html

    Se, por exemplo, você quisesse que a div do código acima tivesse barra de rolagem, poderia tentar adicionar no Css esse trecho:

    .aumentaIMG{overflow:auto;}

    mas, também teria que estabelecer altura e talvez largura para ela, e, a barra só irá aparecer quando as medidas ou soma de medidas forem maior que a medida da Div.

    Esse artigo é mais para pessoas com interesse em aprender Html e Css, ou muita disposição para tentar coisas novas, para isso é preciso, além de fazer testes, praticar e muita pesquisa na web.

    Responder
  27. Anônimo19/4/11

    Bom dia!

    Estava procurando um código como esse, muito bom esse efeito, só tenho uma dúvida, preciso que a figura maior apareça na esquerda da figura menor, onde altero no código pra que isso aconteça.

    Ademir Silva

    Responder
  28. Anônimo

    Não testei isso ainda, o ideal é você fazer alguns testes com o código acima usando float:right; nas partes do Css, sempre entre as chaves, acho que parte do Css ficando assim resolveria:

    .aumentaIMG A IMG {float:right; BORDER:#000 1px solid;}

    Mas teria que retirar position:absolute; do Css e não usar as tags <em> na parte do código Html que mostrei no post

    Responder
  29. Anônimo1/5/11

    Olá ! Boa tarde !

    Seguinte, queria saber se tem como jogar esse codigo dentro de um site que estou fazendo hospedado na homehost...

    Se sim, tenho uma pagina totalmente em branco, por ex., como eu começaria montando essa pagina para ter esse efeito?

    QQ coisa se ñ consegui me explicar direito, eu colo o codigo de uma amostra de minha pagina aqui, e se puder me ajudar, ficaria muito grata.

    Obg.
    Viviane

    Responder
  30. Anônimo(Viviane)

    Infelizmente eu não disponho de tempo e nem aqui não é o local para você colar códigos, tenta algum fórum para Html.

    Esse código funciona em páginas Html e está bem explicado para quem sabe o básico de Html, e você precisa saber isso para fazer site.

    Qualquer que seja o local de hospedagem de domínio ele vai funcionar porque é Html e o Css contido nem precisa estar num arquivo externo.

    Responder
  31. cara. excelente isso. meus parabéns.

    Responder
  32. quando passo esses códigos para um editor de html ele não funciona o link da figura grande, gostaria de uma explicação, como faço para que o link funcione na figura grande e a pessoa ao clicar vá para outra parte do nosso site!

    Obrigado!

    Responder
  33. Instituto PAI

    Não sei o que pode ser feito, alguns editores mudam alguns códigos, você deve observar que alteração ele fez, se ele alterou algo, ou se é apenas a opção de visualização dele que não apresenta o efeito.

    Uma vez usei o blogger pra inserir código na lateral e ele mudou as letras maiúsculas de uma classe ou Id, não lembro qual, mas isso fez com que não funcionasse.

    Responder
  34. Olá querido amigo. Quanto tempo...
    Estive sem cpu por meses e só agora estou voltando. Postei uma tabela de salários mas fica quase impossível visualizá-la. queria saber como fazer para que a imagem ao clicar sobre ela, esta abra em outra janela e maior. Isso é possível?
    Outra coisa, coloquei desde o início do blog um banner do FT, antes ele funcionava, porém agora ao clicar diz que a página não existe, ou algo assim. O que faço. Bjão

    Responder
    ...Respostas
    1. No blogger, você pode postar uma imagem grande que está no seu computador e ele mostra uma menor mas cria um link para a original, essa é a maneira mais fácil.

      Mesmo assim você pode postar uma imagem e fazer ela virar um link para outra imagem, no caso, outra imagem maior, mas precisará postar duas imagens, a pequena e a grande, após postar a imagem grande você precisa descobrir a Url dela, geralmente basta, após postar ela, clicar nela com o lado direito do mouse e na opção >Propriedade aí aparece a Url, copia ela e acessa, se não for a imagem grande, aí, você vai na área de criação da postagem e na parte Editar Html você copia o Url que está logo depois de href=' e que vai até o próximo caractere fecha-aspas ' geralmente as Url estão entre duas aspas simples ou entre um par de aspas duplas, o bom é você postar a imagem grande e descobrir qual Url é dela, isso porque o blogger cria uma miniatura e um link para a original. Para isso você pode pesquisar aqui 'imagem link no blogger', aí usar a Url da imagem grande para criar um link para essa imagem, depois de postar e fazer a função da imagem que vai abrir como link, aí, para que abra em nova página, precisa ir em Editar Html da postagem e procurar esse trecho <a e depois dele deixar um espaço em branco e acrescentar target='_blank' e deixar novo espaço em branco, iria ficar parecido com isso:

      <a target='blank' href='

  35. queria que ao passar o mouse para a segunda imagem(a maior) a imagem grande desaparecesse, ou seja, acabasse o efeito. tem como?

    Responder
    ...Respostas
    1. Com Css não é possível, com javascript tem uma função muito fácil para o que você quer, clique e veja aqui, também pode pesquisar outros códigos javascript que fazem esse efeito.

  36. Anônimo30/10/12

    cara, tenho um organograma, e em cada caixa eu queria que quando eu passasse o mouse aparecer um rosto diferente. como seria?

    Responder
    ...Respostas
    1. Isso eu ficarei devendo porque não tenho ideia de como fazer.

  37. Gostei das dicas todas, estava procurando essas informações, fiquei com uma dúvida, onde voce diz ´´descreva AQUI sobre o que eh sua imagem`` o que devo colocar se no caso eu gostaria desse efeito para todas as minhas fotos publicadas em meu blog. Faço trabalhos artesanais e publico muitas fotos. Outra duvida é, no código voce diz:http://NOMEsite.com/ENDERECO_DA_IMAGEM.XXX refere-se ao endereço do meu blog( é obvio) mas para cada blog eu mudo o enderego no codigo. Obrigada,

    Responder
    ...Respostas
    1. Onde diz http://NOMEsite.com/ENDERECO_DA_IMAGEM.XXX é o endereço Url da imagem e onde eu deixei aquele "descreva AQUI sobre o que eh sua imagem" é uma propriedade chamada texto alternativo(alt) que você tenta descrever a imagem, ele pode ser útil para deficientes visuais que tem um programa capaz de ler isso e é útil para sites de busca tentarem entender sobre o que é a imagem, com essa 'descrição' sua imagem tem mais chances de aparecer em páginas de busca por imagem.

      Você só deve ter cuidado com aspas.

→Dê sua opinião. Faça comentário relacionado ao post.
Comentário com e-mail será excluído
Antes de perguntar leia o texto até comentários e pesquise, a resposta virá no comentário, para ser avisado use uma conta e o link: Subscribe by email(abaixo)
Será excluído comentário não relacionado ou com Url de blog/site(Divulgar? Clique)

Comentário reflete a opinião do comentarista. Desde já, Obrigado!