Efeito Shine

Como vão pessoal? Trago mais um tutorial que achei bem legal o efeito Shine, sendo criativo da pra fazer umas coisas bem maneiras com ele, como na elite de postadores ou nos afiliados, acho que fica muito lindo e vale a pena dar um espacinho pra ele em um layout. Fica muito cutie alguém passar o mouse sobre a imagem e aparecer aquele brilhinho. Preview Aqui. Ae antes que me esqueça os créditos são do KW.

1. Vá até editar HTML e então procure por ]]></b:skin>. Acima dessa tag, cole:

Códigos

.image_shine{

    width:  LARGURApx;

    height: ALTURApx;

    margin-right: 5px;

    margin-bottom: 5px;

    position: relative;

    float: left;

    border: 3px solid #CORDABORDA;

}

.hover_shine{

    width:115px; height: 115px;

    background-image: url(http://i.minus.com/iuvzYDPlYu8RR.png);

    position: absolute;

    background-position: -265px 0;

    left:0px; top:0px;

    background-repeat:no-repeat;

}

.hover_shine:hover{

    background-position: 10px 0;

    -webkit-transition: background-position .9s ease;

       -moz-transition: background-position .9s ease;

         -o-transition: background-position .9s ease;

            transition: background-position .9s ease;

}

2. Agora em seu Layout crie um gadget de HTML/JavaScript, cole:

Códigos

<div class="image_shine">

<img src="LINK DA IMAGEM"/>

<a href="LINK" title="TITULO"><div class="hover_shine"></div></a>

</div>