Tutorial - Efeito Shine

 

Boa tarde novamente, pessoal.

Como eu disse vou trazer uma série de tutoriais hoje por ser mais fácil para mim, acho que uns três logo. Depois vou passar a realizar os pedidos que fizeram lá naquela postagem, que aí sim serão mais utilitários. Dessa vez trouxe o efeito "Shine" que eu achei lindo e super criativo, com algumas mudanças dá para fazer coisas bem legais.

O efeito eu encontrei no tumblr Queen Extras, se não me engano e achei ele muito fofinho. Até na elite de afiliados fica lindo. Ao passar o mouse sobre a imagem, uma outra imagem em hover aparece passando e dá um efeito de brilho, mas é melhor vocês verem ao vivo do que comigo explicando, não é mesmo? Clique aqui para ir até a preview e ver o efeito.

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.