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