Aumentando título do blog ao passar o mouse

Transições com Css3 é algo que amamos pela variedade de efeitos que podemos obter e sem necessidade de utilizar nenhum script, tudo é Css. ...

Transições com Css3 é algo que amamos pela variedade de efeitos que podemos obter e sem necessidade de utilizar nenhum script, tudo é Css.

Um desses efeitos é fazer a imagem de cabeçalho (ou titulo do blog caso não tenha imagem) possa aumentar passando o mouse com este este efeito suave e deslizante.






Para começar tenha uma imagem num tamanho grande, isto é para que nenhum pixel seja acrescentado. Quero dizer que se por exemplo, a imagem do cabeçalho aumentará a 400px de largura, então, a largura original da imagem deve ser de 400px ou mais.

Logo, tem que saber as medidas que terá a imagem quando pequena, com isso termos que tomar medidas proporcionais para que ao reduzi-lá não fique desproporcional.

Agora sim, entre no Editar HTML do template e coloque antes de ]]></b:skin> o seguinte código:
#header img {
width:200px; /* Largura da imagem no estado normal */
height:200px; /* Altura da imagem no estado normal */
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
}
#header img:hover {
width:400px; /* Largura da imagem ao passar o mouse */
height:400px; /* Altura da imagem ao passar o mouse */
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
}
Altere os valores de width e height, width é largura da imagem, e height é altura, na cor verá a qual corresponde cada um.

Porem se não usa imagem como cabeçalho, você pode também aplicar este efeito ao titulo do blog.




Bloggermin

O procedimento é similar: coloque o seguinte código antes de ]]></b:kin>:
#header h1 {
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
}
#header h1:hover {
font-size:80px; /* Tamanho do texto ao passar o mouse */
color:#FF00FF; /* Cor do texto ao passar o mouse*/
margin-left:-30px; /* Margem esquerda */
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
}
Esse é mesmo complicado, pois não tem que saber as medidas, somente deve colocar o tamanho da fonte que o titulo terá ao passar o mouse. Embora, você pode adicionar outras propriedade como um cor diferente, e também pode usar as margens para que o texto aumente a partir do centro, porem se não quiser usar estás ultimas pode exclui-las sem problemas.

É tão simples, agora você pode ter o cabeçalho do seu blog com efeito zoom ao passar o mouse, agora, lamento decepcionar os usuários do Internet Explorer, pois eles não verão nenhum efeito.

Outra razão para usar um navegador moderno.

COMENTÁRIOS

Nome

Básicos,3,Blogger,43,Botões,2,buscadores,3,Comentários,5,Css3,9,Design,3,Dominio,3,Downloads,2,Efeito,13,Facebook,3,Feed,1,Festividades,1,GooglePlus,6,Hacks,7,HTML,8,Imagens,8,Menu,3,Recursos,3,Seo,8,Truque,24,Twitter,2,Widget - Gadget,16,
ltr
item
Bloggermin: Aumentando título do blog ao passar o mouse
Aumentando título do blog ao passar o mouse
https://lh5.googleusercontent.com/-14UFkL-Lb6Q/Ttv0zGixSSI/AAAAAAAAANI/srFGOneOt3M/s800/logotwitterotimizado.png
https://lh5.googleusercontent.com/-14UFkL-Lb6Q/Ttv0zGixSSI/AAAAAAAAANI/srFGOneOt3M/s72-c/logotwitterotimizado.png
Bloggermin
https://www.bloggermin.cashmore.com.br/2011/12/aumentando-titulo-do-blog-ao-passar-o.html
https://www.bloggermin.cashmore.com.br/
https://www.bloggermin.cashmore.com.br/
https://www.bloggermin.cashmore.com.br/2011/12/aumentando-titulo-do-blog-ao-passar-o.html
true
3085171147808187471
UTF-8
Carregado Todas os Posts. Não foi encontrado nenhum post. VER TUDO Leia mais Responder Cancelar resposta Excluir Por Home PÁGINAS POSTAGENS Ver tudo RECOMENDADO PARA VOCÊ ETIQUETA ARQUIVO PESQUISAR TODAS AS PUBLICAÇÕES Não foi encontrado qualquer correspondência postal com o seu pedido Voltar a Home Domingo Segunda-feira Terça-feira Quarta-feira Quinta-feira Sexta-feira Sábado Dom Seg Ter Qua Qui Sex Sáb Janeiro Fevereiro Março Abril Maio Junho Julho Agosto Setembro Outubro Novembro Dezembro Jan Fev Mar Abr Maio Jun Jul Ago Set Out Nov Dez agora mesmo 1 minuto atrás $$1$$ minutes ago 1 hora atrás $$1$$ hours ago Ontem $$1$$ days ago $$1$$ weeks ago mais de 5 semanas atrás Seguidores Seguir O CONTEÚDO É PREMIUM Por favor, compartilhe para desbloquear Copiar Todo o Código Selecionar Todo o Código Todos os códigos foram copiados para a área de transferência Não é possível copiar os códigos / textos, por favor pressione [CTRL] + [C] (ou CMD + C com Mac) para copiar