Tutorial : Efeito Shine

Bom Dia :)

Hoje eu irei ensinar para vocês,como aplicar o 'Efeito Shine'

Antes eu gostaria que vocês visitasem esse novo blog Hello HTML !

Para ver o efeito Shine clique aqui,agora clique em leia mais e vamos a tutorial.

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

.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;

}

Edite, como sempre, as partes em negrito e depois salve. É claro que se você entender outra parte do código e quiser mudar, pode fazer como quiser. Estou apenas dando-lhes o mais importante.

2. Em um gadget de HTML/JavaScript, cole:

<div class="image_shine">

<img src="LINK DA IMAGEM"/>

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

</div>

Edite novamente as partes em negrito e salve.
Créditos: Kawaii World