Lindo e exclusivo efeito css3 para imagens e avatares- See More Efect

Oie

Hoje vim trazer para voçes um efeito  lindo que da todo um charme para sua imagem,seja ela um icon,um avatar ou uma foto normal...
Ela faz parte de uma coleção de 10 efeitos que fiz recentemente..mas irei postar um de cada vez para fazer um suspense maior.

Title

Sua descrição

Mais...

<---- Confira ao lado,o preview do efeito...(passe o mouse na imagem)

Vamos aprender??
Primeiro,no seu painel do blogger, asceda á modelo>Editar HTML>
Procura a tag ]]></b:skin> e cole as seguintes estilizações,logo acima dela...

.efect {
    width: 120px;/*------altere pela largura da sua imagem-------*/
    height: 168px;/*------altere pela altura da sua imagem-------*/
    margin: 10px;
    float: left;
    border: 10px solid #fff;
    overflow: hidden;
    position: relative;
    text-align: center;
    box-shadow: 1px 1px 2px #e6e6e6;
    cursor: default;
    background: #fff url(../images/bgimg.jpg) no-repeat center center;
}
.efect .mask, .efect .content {
    width: 120px;
    height: 168px;
    position: absolute;
    overflow: hidden;
    top: 0;
    left: 0
}
.efect img {
    display: block;
    position: relative
}
.efect h2 {
    font-family:Georgia,serif;/*--edite a fonte do efeito---*/
    text-transform: uppercase;
    color: #fff;
    text-align: center;
    position: relative;
    font-size: 17px;
    padding: 10px;
    background: rgba(0, 0, 0, 0.8);
    margin: 20px 0 0 0
}
.efect p {
    font-family: Comic Sans Ms; /*-Use uma fonte pequena se sua imagem for menor-*/
    font-size: 6px;
    position: relative;
    color: #fff;/*--edite a cor fonte da descrição---*/
    padding: 10px 20px 20px;
    text-align: center
}
.efect a.info {
    display: inline-block;
    text-decoration: none;
    padding: 7px 14px;
    background: #000;
    color: #fff;
    text-transform: uppercase;
    box-shadow: 0 0 1px #000
}
.efect a.info:hover {
    box-shadow: 0 0 5px #000
}.view-first img {
    transition: all 0.2s linear;
}
.efect-first .mask {
    opacity: 0;
    background-color: rgba(255,16,109,0.5);/*--edite a cor da mascara---*/
    transition: all 0.4s ease-in-out;
}
.efect-first h2 {
    transform: translateY(-100px);
    opacity: 0;
    transition: all 0.2s ease-in-out;
}
.efect-first p {
    transform: translateY(100px);
    opacity: 0;
    transition: all 0.2s linear;
}
.efect-first a.info{
    opacity: 0;
    transition: all 0.2s ease-in-out;
}

.efect-first:hover img {
    transform: scale(1.1);
}
.efect-first:hover .mask {
    opacity: 1;
}
.efect-first:hover h2,
.efect-first:hover p,
.efect-first:hover a.info {
    opacity: 1;
    transform: translateY(0px);
}
.efect-first:hover p {
    transition-delay: 0.1s;
}
.efect-first:hover a.info {
    transition-delay: 0.2s;}

Em rosa coloque a largura e a altura da imagem,em azul edita as propriedades das fontes que iram aparecer no efeito...em verde coloque uma cor ou imagem do seu gosto...e em vermelho a cor da marcara do efeito,a que irá aparecer ao passar o mouse...
Salve!
Depois ,quando for utilizar a imagem  em um gadget de HTML/JavaScript,cole isso:

<div class="efect efect-first">
<img src="Url da imagem aqui" />  <div class="mask">
<h2>Titulo</h2>
<p>Sua descrição</p>
<a class="info" href="Um link aqui">Mais...</a>
     </div>
</div>

Edite onde está destacado em colorido,substituindo pelo que achar melhor...
Observaçoes..

• O tamanho da descrição deve ser de acordo com tamanho da imagem,se for pequena como a de um icon,ela deve ser pequena também,já em imagens grandes ela poderá ser bem maior.

• Uma boa dica é que use se fontes pixeladas,para caber mais descrição...

• Não altere outros locais que não forem os destacados,para não correr o risco de atrapalhar o processo do efeito. 

Não reblogue,se usar credite,plágios serão denunciados...