Projetos+ Lindo e exclusivo efeito CSS3-Efeito Enjoy

Ola mi amores...é a jú..

Vim me desculpar pela falta de postagens esses últimos dias...
e avisar que o blog poderá ficar desatualizado as vezes,..
O fato é que estou um tanto desanimada com o blogger,por isso resolvi investir mais em coisas mais complexas.
Eu ia fechar o blog mas pensei bem e decidi que irei migrar o GarotaOusada para o blog do Wordpress.

Não sei o que me levou a decidir isso,mas creio que esta na hora de abrangermos novos horizontes,o Blogger é um plataforma tão limitada,que nos cansamos da mesmice ás vezes não é??
Estou estudando Php,Mysql e Javascript,pois pretendo criar um site de 'compartilhamento de resources' onde cada blogueiro(ou não blogueiro) poderá se cadastrar montar um perfil,e fazer upload dos seus materiais para um servidor próprio,
Esse site seria como o DevianArt só que seria inteiramente destinado á photoshop.
Eu sei é algo complexo...mas gosto de pensar grande,isso me faz querer ir cada vez mais longe e não desistir das coisas por mais difíceis que sejam...

Hoje eu trouxe para voces o segundo efeito daquela a coleção de novos efeitos que fiz,lembram-Se??
Já poste o primeiro,anteriormente...
veja:

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

confira o preview deste segundo efeito:

Title

description

Mais

  Eis o código para ele,cole acima da sua ]]></b:skin> (use o Ctrl+F para encontra-la no seu código HTML):

/* Efeito Enjoy GarotaOusada.com*/

.efect {
    width: 120px;
    height: 168px;
    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, .view .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;
    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; 
    font-size: 6px;
    position: relative;
    color: #fff;
    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 {
display: inline-block;
    text-decoration: none;
    padding: 7px 14px;
    background: #000;
    color: #fff;
    text-transform: uppercase;
    box-shadow: 0 0 5px #000
}


.efect-second img {
    transition: all 0.2s ease-in;
}
.efect-second .mask {
    background-color: rgba(115,146,184, 0.7);
    width: 128px;
    padding: 50px;
    height: 168px;
    opacity: 0;
    transform: translate(265px, 145px) rotate(45deg);
    transition: all 0.2s ease-in-out;
}
.efect-second h2 {
    border-bottom: 1px solid rgba(0, 0, 0, 0.3);
    background: transparent;
    margin: 10px 10px 0px 20px;
    transform: translate(100px, -100px);
    transition: all 0.2s ease-in-out;
}
.efect-second p {
    transform: translate(-100px, 100px);
    transition: all 0.2s ease-in-out;
}
.efect-second a.info {
    transform: translate(0px, 50px);
    transition: all 0.2s 0.1s ease-in-out;
}

.efect-second:hover .mask {
    opacity:1;
    transform: translate(-40px, -75px) rotate(45deg);
}                           
.efect-second:hover h2 {
    transform: translate(0px,0px);
    transition-delay: 0.3s;
}
.efect-second:hover p {
    transform: translate(0px,0px);
    transition-delay: 0.4s;
}
.efect-second:hover a.info {
    transform: translate(0px,0px);
    transition-delay: 0.5s;
}
 /* Fim do Efeito Enjoy GarotaOusada.com*/

Não retire os créditos dos efeitos,ok?!
Em rosa coloque a largura e a altura da imagem,em azul edita as propriedades das fontes que irão aparecer no efeito...em verde coloque uma cor ou imagem do seu gosto...e em vermelho a cor da mascara do efeito,a que irá aparecer ao passar o mouse(só altere os três primeiros números).
Salve!
Depois ,quando for utilizar a imagem  em um gadget de HTML/JavaScript,cole isso:

<div class="efect efect-second">
<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ções..

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