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:
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
ResponderExcluirobrigado
Muito booom caraaa!
ResponderExcluiramei ~
curti demáás!
Obrigadaaa pela dica
Tem como colocar link sem perder o efeito ?
ResponderExcluireddy
ResponderExcluirTem 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?
ResponderExcluirABS!
Aguardo reposta
Anônimo
ResponderExcluirÉ 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.
ResponderExcluirParabéns pela postagem e obrigado.
deu certo criei uma div e coloquei todo o conteúdo
ResponderExcluircriei um arquivo .css externo agora não altera mais o conteúdo
Olá!
ResponderExcluirAdorei 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
ResponderExcluirRealmente 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?
ResponderExcluirEle deixa a tela escura ao clicar e aparece a foto maior veja
http://letras.terra.com.br/evanescence/fotos/
stylebrabus-n85
ResponderExcluirNesta 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.
ResponderExcluirMuito bom viu.. me ajudou bastante no desenvolvimento da minha pagina.....
ResponderExcluirParabéns! Se vc tiver novidades posta no site pra gente!!! Valeu !!
Andreza
como colocar no blog amigo . não consigo
ResponderExcluirbiiel
ResponderExcluirÉ 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!!!
ResponderExcluirAdorei so que não consegui colocar no meu site me ajudem!
ResponderExcluirBoa 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.
ResponderExcluirObrigada!
Att,
Heloisa.
Anônimo, Heloisa
ResponderExcluirNã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.
ResponderExcluirPor 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/
°•·.๓คятค
ResponderExcluirPosso 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
ResponderExcluir#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!
ResponderExcluirOlá tudo bem?
ResponderExcluireu 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
ResponderExcluirNã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!
ResponderExcluirEstava 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
ResponderExcluirNã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 !
ResponderExcluirSeguinte, 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)
ResponderExcluirInfelizmente 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.
ResponderExcluirquando 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!
ResponderExcluirObrigado!
Instituto PAI
ResponderExcluirNã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.
Olá querido amigo. Quanto tempo...
ResponderExcluirEstive 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
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.
ExcluirMesmo 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='
queria que ao passar o mouse para a segunda imagem (a maior) a imagem grande desaparecesse, ou seja, acabasse o efeito. tem como?
ResponderExcluirCom 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.
Excluircara, tenho um organograma, e em cada caixa eu queria que quando eu passasse o mouse aparecer um rosto diferente. como seria?
ResponderExcluirIsso eu ficarei devendo porque não tenho ideia de como fazer.
ExcluirGostei 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,
ResponderExcluirOnde 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.
ExcluirVocê só deve ter cuidado com aspas.