Esse artigo é para pessoas que já entendem Css e Html.
Veja outros exemplos ou problemas, clique aqui
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.
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:
31 comentários:
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
Muito booom caraaa!
amei ~
curti demáás!
Obrigadaaa pela dica
Tem como colocar link sem perder o efeito ?
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/">
Oi amigo, achei muito massa o efeito, mas eu gostaría de saber se tem como fazer isso com swf?
ABS!
Aguardo reposta
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
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.
deu certo criei uma div e coloquei todo o conteúdo
criei um arquivo .css externo agora não altera mais o conteúdo
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?
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)
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/
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.
Muito obrigado amigo. Que Deus te ilumine sempre.
Muito bom viu.. me ajudou bastante no desenvolvimento da minha pagina.....
Parabéns! Se vc tiver novidades posta no site pra gente!!! Valeu !!
Andreza
como colocar no blog amigo . não consigo
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
Obrigado!! Era isso que eu procurava! Vlw!!!
Adorei so que não consegui colocar no meu site me ajudem!
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.
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;"
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/
°•·.๓คятค
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.
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;
}
Ajudou muito obrigado pelo codigo abraço!
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.
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.
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
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
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
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.
cara. excelente isso. meus parabéns.
Postar um comentário