Efeito para Autores

30 de set de 2013


Olá Olá gente :)
eu sei eu sei... estou sumida... Poxa postadores Não somem vocês também,dizem que podem postar todos os dias e cadê?

Bom a nossa postadora Heloo pediu o efeito dos postadores que usei no blog...

O efeito vi no KW créditos totalmente a ele

1. Vá até editar HTML e procure por ]]></b:skin>. Acima dessa tag, cole o seguinte:
ou quem preferir abaixo da tag /* Mobile


.view {
cursor: pointer;
height: ALTURApx;
margin: 1px;
overflow: hidden;
position: relative;
text-align: center;
width: LARGURApx;
display: inline-block;
}
.view img { /* a imagem */
display: inline-block;
position: relative;
-moz-transition: all 0.6s ease-out;
-webkit-transition: all 0.6s ease-out;
-o-transition: all 0.6s ease-out;
transition: all 0.6s ease-out;
opacity: 1;
filter: alpha(opacity=100);
}
.view:hover img { /* se "anima quando passamos o mouse em cima */
-moz-transform: rotate(620deg) scale(0);
-webkit-transform: rotate(620deg) scale(0);
-o-transform: rotate(620deg) scale(0);
-ms-transform: rotate(620deg) scale(0);
transform: rotate(620deg) scale(0);
opacity: 0;
filter: alpha(opacity=0);
}
.view .mask {
background-color: #CORDOFUNDO;
height: ALTURApx;
left: 0;
position: absolute;
overflow: hidden;
top: 0;
width: LARGURApx;
-moz-transform: rotate(0deg) scale(1);
-webkit-transform: rotate(0deg) scale(1);
-o-transform: rotate(0deg) scale(1);
-ms-transform: rotate(0deg) scale(1);
transform: rotate(0deg) scale(1);
-moz-transition: all 0.4s ease-out;
-webkit-transition: all 0.4s ease-out;
-o-transition: all 0.4s ease-out;
transition: all 0.4s ease-out;
opacity: 0;
filter: alpha(opacity=0);
}
.view:hover .mask {
-moz-transform: translateY(0px) rotate(0deg);
-webkit-transform: translateY(0px) rotate(0deg);
-o-transform: translateY(0px) rotate(0deg);
-ms-transform: translateY(0px) rotate(0deg);
transform: translateY(0px) rotate(0deg);
-moz-transition-delay: 0.4s;
-webkit-transition-delay: 0.4s;
-o-transition-delay: 0.4s;
transition-delay: 0.4s;
opacity: 1;
filter: alpha(opacity=100);}
.view h4 {
background-color: #CORDAFAIXA;
opacity: 0.8;
color: #CORDOTÍTULO;
text-align: center;
position: relative;
font-family: handy;
text-transform: uppercase;
font-size: 8px;
margin: 9px 0 0 0;
padding: 5px 0;
-moz-transform: translateY(-200px);
-webkit-transform: translateY(-200px);
-o-transform: translateY(-200px);
-ms-transform: translateY(-200px);
transform: translateY(-200px);
-moz-transition: all 0.2s ease-in-out;
-webkit-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
.view:hover h4 { /* título é mostrado */
-moz-transform: translateY(0px);
-webkit-transform: translateY(0px);
-o-transform: translateY(0px);
-ms-transform: translateY(0px);
transform: translateY(0px);
-moz-transition-delay: 0.7s;
-webkit-transition-delay: 0.7s;
-o-transition-delay: 0.7s;
transition-delay: 0.7s;
}
.view p { /* o texto permanece oculto */
color: #fd0505;
font-family: pf arma five;
font-size: 8px;
margin: 0;
padding: 15px;
position: relative;
text-align: center;
-moz-transform: translateY(-200px);
-webkit-transform: translateY(-200px);
-o-transform: translateY(-200px);
-ms-transform: translateY(-200px);
transform: translateY(-200px);
-moz-transition: all 0.2s ease-in-out;
-webkit-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
.view:hover p { /* texto é mostrado */
-moz-transform: translateY(0px);
-webkit-transform: translateY(0px);
-o-transform: translateY(0px);
-ms-transform: translateY(0px);
transform: translateY(0px);
-moz-transition-delay: 0.6s;
-webkit-transition-delay: 0.6s;
-o-transition-delay: 0.6s;
transition-delay: 0.6s;
}
.view a.info { /* o link permanece oculto */
background-color: #CORDOBOTÃO;
border-radius: 5px;
box-shadow: 0 0 2px #e4e2e5, 0 0 5px #e4e2e5 inset;
color: #FFF;
display: inline-block;
padding: 2px 10px;
text-decoration: none;
margin-top: 8px;
font-family: handy;
font-size: 8px;
-moz-transform: translateY(-200px);
-webkit-transform: translateY(-200px);
-o-transform: translateY(-200px);
-ms-transform: translateY(-200px);
transform: translateY(-200px);
-moz-transition: all 0.2s ease-in-out;
-webkit-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
.view a.info:hover {
box-shadow: 0 0 5px #968ca3;
}
.view:hover a.info { /* link é mostrado */
-moz-transform: translateY(0px);
-webkit-transform: translateY(0px);
-o-transform: translateY(0px);
-ms-transform: translateY(0px);
transform: translateY(0px);
-moz-transition-delay: 0.5s;
-webkit-transition-delay: 0.5s;
-o-transition-delay: 0.5s;
transition-delay: 0.5s;
}

Edite o que está em negrito 
2. Em um gadget de HTML/JavaScript, cole o seguinte e salve: 

<div class="view">
<img src="URL DA FOTO" />
<div class="mask">
<h4>NOME</h4>
<a href="LINK" class="info">Visite!</a>
</div></div>

6 comentários :

Ari Sami disse...

Muito útil, quem sabe um dia eu uso, bejokas :*
Miss-teensami.blogspot.com

Heloísa disse...

ain que efeito divo

htmlandresources.blogspot.com

Thamiris Lara disse...

:) Obg pela visita :)

Thamiris Lara disse...

*-* é mesmo ahaha

Obg pela visita flor :)

Heloo Domingos disse...

haha >< obrigado ^^
vou usar no meu blog :)

Thamiris Lara disse...

De nada Florzinha,fique a vontade :)

Postar um comentário

Seu Comentários é sempre bem vindo!
Comente,opine,se expresse! Este espaço é seu!
Comentar faz parte,então por favor deixem comentários

-Todos os comentários são moderados e só ficarão disponíveis ao serem aprovados
-A área de comentários não é casa da mãe Joana,então tenha respeito.Não use palavrões,nem insultos,ofensas,agressões e baixarias;
-Não serão aceitos comentários Anônimos,comentários repetidos,e que tenham qualquer material publicitários ou de merchandising pessoal ou de benefício de terceiros
-Contatos pessoais devem ser feitos na pagina de contato.
-Não deixe links desnecessários os comentários

AVISOS:

--Blog não é Chat,respeitadas as regras ,é livre o debate dos assuntos aqui postados,Que o espaço de comentários não sirva para bate papo sobre assuntos de caráter pessoal ou estranhos ao blog
--A tentativa de clonar nomes e apelidos de outros usuários para emitir opiniões em nome de terceiros configura crime de falsidade ideológica.

Espero que tenham gostado do blog e que volte sempre!