efeito top-down para imagens

Yoo açaís com granola (tô carente de açaí, maldita dieta)! Como vão? Eu vou bem, obrigada. Graças a Deus meu The Sims 4 estará em minhas mãos amanhã! Meu cabelo já tá branco de tanta alegria *~* ok, desde o post passado falando de The Sims, vamos inovar, certo? SHUEHSU' tipo, eu não sei se vocês vão gostar muito do efeito pois eu tô sem tempo para pensar em coisas novas, já que tenho que ajudar a minha irmã a fazer bolos (eu já disse que ela vende bolos?), e adivinhem quem é a escrava que deve dar uma de assistente? Sim, eu ¬¬ e nesse ritmo, manter a dieta vai ser complicado, né. Enfim; espero que gostem. E se usarem, creditem, please {preview aqui}

1. Vá em Modelo >> Editar HTML >> Dê Ctrl + F e procure por ]]><
Achou a tag? Ótimo. Agora colem acima dela o seguinte código:
.topdownhtmlittle {
text-align: center; /*alinhamento do texto*/
width: 238px; /*largura*/
 height:238px; /*altura*/
overflow: hidden;display: inline-block;
position: relative;
margin:2px; /*espaço entre as imagens*/
}
.topdownhtmlittle img{
-webkit-filter: none;
-webkit-transition:all 5s ease;
width: 238px; /*largura*/
height:238px; /*altura*/}
.descrição2 img:hover {
-webkit-transition:all 0.5s ease;
-webkit-transition-duration: 2.0s;
}
.topdownhtmlittle .description{
transition:All 2.9477s ease;
-webkit-transition:All 2.9477s ease;
-moz-transition:All 2.9477s ease;
-o-transition:All 2.9477s ease;
transform: rotate(4deg) scale(1) skew(1deg) translate(10px);
-webkit-transform: rotate(4deg) scale(1) skew(1deg) translate(10px);
-moz-transform: rotate(4deg) scale(1) skew(1deg) translate(10px);
-o-transform: rotate(4deg) scale(1) skew(1deg) translate(10px);
-ms-transform: rotate(4deg) scale(1) skew(1deg) translate(10px);
position: absolute;
width: 238px; /*largura*/
height:60px; /*altura*/opacity: 0.7;
background: #FFF; /* cor do fundo da descrição*/
color: #b39382; /*cor da letra*/
text-shadow: 1px 1px 3px #423935; /*sombra da letra*/
-webkit-transform: scale(1.0,1.0);margin-top: -230px;
-webkit-transition-duration: 1.0s;
margin-left: 0px;
}
.topdownhtmlittle:hover .description{
transform: rotate(360deg) scale(0.96) skew(1deg) translate(1px);
-webkit-transform: rotate(360deg) scale(0.96) skew(1deg) translate(1px);
-moz-transform: rotate(360deg) scale(0.96) skew(1deg) translate(1px);
-o-transform: rotate(360deg) scale(0.96) skew(1deg) translate(1px);
-ms-transform: rotate(360deg) scale(0.96) skew(1deg) translate(1px);
width: 238px; /*largura*/
height:238px; /*altura*/opacity: 0.7; /*opacidade do fundo da descrição*/
background: #423935; /* cor do fundo da descrição em hover*/
color: #fff; /* cor da letra em hover */
text-shadow: 1px 1px 3px #000; /*sombra da letra em hover*/
-webkit-transform: scale(1.0,1.0);
-webkit-transition-duration: 1.0s;
margin-top: -90px;
margin-left: 0px;
}
Não modifique nada que não esteja com o aviso ao lado, ok? A não ser que, você tenha o conhecimento do que está fazendo.

2. Depois de salvarem, vão em Layout >> Adicionar um Gadget >> HTML/JavaScript
Dentro do gadget cole esse código:
<div class="topdownhtmlittle"><img src="LINK DA SUA IMAGEM" /><div class="description">SEU TEXTO AQUI</div></div>
Prontinho! Agora é só mudar o que for necessário e salvar.
Besitos da Jubs <3

6 comentários:

  1. Xent, q efeito legal! Com certeza vou usar ^^

    Kissus http://c-omebackhome.blogspot.com/

    ResponderExcluir
  2. Nossa! Açaí é tão bom :3 agora deu até vontade. Haha' ain que massa cara, sua irmã vende bolos? Eu tenho uma tia que vende também, ela faz de todos os tamanhos, desde aniversário, casamento ou até bolos simples também, ah e doces hahaha' diliça. Amei o efeito, tipo, massa

    Adolescente Nerd // Oficial

    ResponderExcluir
  3. efeito lindo, deixa a imagem mais interessante e ainda se pode colocar uma legenda, haha, amei.
    Faz uma visita, haha. Beijos. - Disturbia

    ResponderExcluir
  4. Tá ai um jogo que já baixei e não gostei não, e olha que curto jogos assim de montar cidades, controlar pessoas etc.. Mas este baixei e não gostei T^T, gente que efeito bacana cara, está de parabéns super fofo >.< Beijocas linda =3

    ResponderExcluir
  5. É um efeito muito curioso. Sempre quis saber como fazia *0* Estou seguindo, se puder retribua ^^
    Kissus da Isa
    By || Doce bunny ||

    ResponderExcluir

Yoo chokito ^y^
Vejo que está indo comentar, fico feliz por isso, cada comentário pra mim é uma voz dizendo "Continue, não se desvie do seu sonho!" então muito obrigada... Mas, antes eu vou dizer algumas regrinhas, ok?

- Por favor, não fique no anônimo apenas para xingar alguém. E se não me engano, isso é o quê as blogueiras mais pedem. Eu ficarei muito agradecida se ninguém aqui praticar coisas do tipo, até porque estamos num pedacinho do céu, e temos que preservar a paz, certo? Certo!

- Se quiser pedir afiliação, é só ir na página que está no menu lá em cima. Querem uma asinha para subir? =3

- Desculpem, mas não faço parte do "Seguindo, segue de volta?", até porque aqui não é Twitter, né? E mesmo assim, eu visitarei todos os blogs, e seguirei se gostar do conteúdo. Não me importo com o layout, até porque estamos aqui para ajudar uns aos outros, né?

- Em breve estarei fazendo uma Ask para o blog, mas enquanto isso podem perguntar por aqui mesmo.

Bom... Eu acho que é só isso! Se quiserem algum tuto ou tag, podem pedir à vontade. Besitos, amo vocês! <3