09/03/2013

Efeito zoom

Hey, leitores.
Sumi do blog, me desculpem, é que estou tendo que me virar em 1000,  aguentar escola, natação e inglês não é fácil. Mas acho que é melhor o blog parado do que  com uma pessoa chata como eu escrevendo, hein?  Enfim para os que ainda não perceberam minha chatice e aos novos leitores trouxe um request que foi feito pela ask, mas antes de trazê-lo preciso lembrar a vocês que requests devem ser feitos apenas desse jeito, pela ask do blog que se encontra na sidebar, ok? Para manter tudo organizado, apenas façam requests por lá.
O tutorial é do KW, ainda não trouxe tutoriais próprios, pois ainda não sei montar direito meus próprio códigos, o tutorial é de colocar o efeito zoom na elite afiliados.
1. Procure por ]]></b:skin> e acima cole:
.elitescale{-moz-border-radius: 2px;-webkit-border-radius: 2px;-webkit-transition: 0s linear;-webkit-transition: opacity 0.5s linear;-webkit-transition: all 0.3s linear;-webkit-transition: all 0.3s linear;-moz-transition: all 0.3s linear;transition: all 0.3s linear;background-color: #e7a5de; padding: 3px;}.elitescale:hover {-webkit-transform: scale(1.20);-moz-transform: scale(1.20);background-color: #c4a6cb; padding: 3px;}
Entenda o código: 
-moz-border-radius: 2px;-webkit-border-radius: 2px;
Aumente o número para arredondar mais a borda.
-webkit-transition: all 0.3s linear;-webkit-transition: all 0.3s linear;-moz-transition: all 0.3s linear;transition: all 0.3s linear;
Aumente se quiser que demore mais até a imagem aumentar.
background-color: #e7a5de;
Cor da borda sem o mouse por cima
-webkit-transform: scale(1.20);-moz-transform: scale(1.20);
O quanto a imagem vai crescer. Aumente se quiser que ela fique maior ainda ou diminua se quiser algo mais sutil. Eu uso 0.6 aqui no blog
background-color: #c4a6cb;
Cor da borda com o mouse por cima.
padding: 3px;
Existem dois desses no código. O primeiro define o tamanho da borda sem o mouse e o segundo com.
2. Na sua elite, use o seguinte código:
<a href="Link do Blog" title="Nome do blog"><img src="link da sua imagem" class="elitescale"/></a>
 Metalkisses

8 comentários:

  1. aa senti sua falta, e tudo bem amoree o/
    todo mundo tem coisas para fazer, e esse efeito é bem legal eu conhecia, mais era o ZOOM giratório o/
    gosteei o/
    acervo-de-livros.blogspot.com

    ResponderExcluir
  2. u-u Adorei tutorial! O efeito deve ser lindo, não lembro de tê-lo visto!
    Beijos

    http://escritade-cabeceira.blogspot.com.br/

    ResponderExcluir
  3. Quem bom que você está de volta :) Concordo que os pedidos devem ser feitos pela ask,organização é muito importante em um blog! Adorei o tutorial,bem diferente :3 tenha um ótimo fim de semana,beijos

    Quem precisa de tv para ver Beyoncé ♥Perfil

    ResponderExcluir
    Respostas
    1. Organização é bem importante, que bom que gostou.

      Excluir
  4. Esse efeito é demais!! gostei mesmo - seu blog também é perfeito <3
    Visita ai >>http://fabiolucas92.blogspot.com.br/
    se gostar me segue, há claro sigo aqui também
    ABRAÇOS DO FÁBI

    ResponderExcluir

- Não estou aceitando tags ou selinhos.
- Use os comentários ou a ask para fazer requests.
- Respondo todos os comentários e retribuo na maioria das vezes.
- "Seguindo! Segue de volta?" Depende, se você já tiver seguido realmente e eu gostar do seu blog.