Efeitos em imagens

Oi Oi pessoas!!

Hoje eu vou postar alguns efeitos para elite de afiliados ou para os posts.

Eu tirei a base no blog Vodca e Coca. Veja uma demonstração dos efeitos.

 Coloque os código acima da tag /b:skin. Para usar na elite você deve acrescentar a class="Nome da class" depois do link da imagem. (Class é a palavra depois do ponto (.). Exemplo: .elite, class="elite".

Efeito 1 - Borda e opacidade 

Na elite de afiliados: 

.efeito1 {
width: 50px;
height: 50px;
-webkit-transition: 0.5s;
opacity: 0.6;
text-align: center;
-webkit-border-radius: 25px;
-webkit-box-shadow: 0 0 .8em #000000;
}
.efeito1:hover {
text-align: center;
-webkit-transition: 0.8s;
-webkit-box-shadow: 0 0 .8em #000000;
-webkit-border-radius: 0px;
opacity: 1.0;
-webkit-transition: all 1.0s linear;-webkit-transition: all 1.0s linear;-moz-transition: all 1.0s linear;transition: all 1.0s linear;
}

Nas imagens do post:

.post img {

-webkit-transition: 0.5s;

opacity: 0.6; 

-webkit-border-radius: 25px;

-webkit-box-shadow: 0 0 .8em #000000; 

}

.post img:hover {

-webkit-transition: 0.8s;

-webkit-box-shadow: 0 0 .8em #000000;

-webkit-border-radius: 0px;

opacity: 1.0;

-webkit-transition: all 1.0s linear;-webkit-transition: all 1.0s linear;-moz-transition: all 1.0s linear;transition: all 1.0s linear;

}

 Efeito 2 - Borda e opacidade quando passa o mouse

Na elite de afiliados:

.efeito2 {
-webkit-transition: 0.5s;
opacity: 0.6;
text-align: center;
-webkit-border-radius: 0px;
-webkit-box-shadow: 0 0 .8em #000000;
}
.efeito2:hover {
text-align: center;
-webkit-transition: 0.8s;
-webkit-box-shadow: 0 0 .8em #000000;
-webkit-border-radius: 25px;
opacity: 1.0;
-webkit-transition: all 1.0s linear;-webkit-transition: all 1.0s linear;-moz-transition: all 1.0s linear;transition: all 1.0s linear;
}

Nas imagens do post:

 .post img {
-webkit-transition: 0.5s;
opacity: 0.6;
-webkit-border-radius: 0px;
-webkit-box-shadow: 0 0 .8em #000000;
}
.post img:hover {
-webkit-transition: 0.8s;
-webkit-box-shadow: 0 0 .8em #000000;
-webkit-border-radius: 25px;
opacity: 1.0;
-webkit-transition: all 1.0s linear;-webkit-transition: all 1.0s linear;-moz-transition: all 1.0s linear;transition: all 1.0s linear;
}

Efeito 3 - Opacidade 

Na elite de afiliados:

.efeito3 {

width: 50px;

height: 50px;

-webkit-transition: 0.5s;

opacity: 0.6;

}

.efeito3:hover {

opacity: 1.0;

}

Nas imagens do post:

.post img {

-webkit-transition: 0.5s;

opacity: 0.6;

}

.post img:hover {

opacity: 1.0;

}

Efeito 4 - Opacidade e borda arredondada

Na elite de afiliados:

.efeito4 {
width: 50px;
height: 50px;
opacity: 0.6;
-webkit-transition: 0.9s;
text-align: center;
}
.efeito4:hover {
opacity: 1.0;
border-radius: 35px;
}

Nas imagens do post:

 .post img {
opacity: 0.6;
-webkit-transition: 0.9s;
text-align: center;
}
.post img:hover {
opacity: 1.0;
border-radius: 35px;
}

 Efeito 5 - Opacidade e borda

Na elite de afiliados:

.efeito5 {

border: 5px solid #AE18F2;

opacity: 0.6;

-webkit-transition: 0.5s;

text-align: center;

}

.efeito5:hover {

opacity: 1.0;

border: 5px solid #666666;

}

Nas imagens do post:

.post img {
border: 5px solid #AE18F2;
opacity: 0.6;
-webkit-transition: 0.5s;
text-align: center;
}
.post img:hover {
opacity: 1.0;
border: 5px solid #666666;
}

Efeito 6 - Borda na imagem

Na elite de afiliados

.efeito6 {
padding: 5px;
background: #FDC3F8;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
-khtml-border-radius: 10px;
border-top: 1px solid #fff;
border-left: 1px solid #fff;
border-right: 1px solid #fff;
border-bottom: 1px solid #d6d6d6;
opacity: 1.0;
-webkit-transition: 0.5s;
}
.efeito6:hover {
padding:5px;
background: #997D94;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
-khtml-border-radius: 10px;
border-top: 1px solid #f2c5f0;
border-left: 1px solid #f2c5f0;
border-right: 1px solid #f2c5f0;
border-bottom: 1px solid #be98cc;
opacity: 0.6;
}

 Nas imagens do post:

 .post img {
padding: 5px;
background: #FDC3F8;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
-khtml-border-radius: 10px;
border-top: 1px solid #fff;
border-left: 1px solid #fff;
border-right: 1px solid #fff;
border-bottom: 1px solid #d6d6d6;
opacity: 1.0;
-webkit-transition: 0.5s;
}
.post img:hover {
padding:5px;
background: #997D94;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
-khtml-border-radius: 10px;
border-top: 1px solid #f2c5f0;
border-left: 1px solid #f2c5f0;
border-right: 1px solid #f2c5f0;
border-bottom: 1px solid #be98cc;
opacity: 0.6;
}

Só pra lembrar gente, não adicione todos os efeitos, quanto mais código HTML seu blog tem, mais pesado ele fica, e quanto mais pesado, menos visitas. Nem todo mundo tem internet boa. Espero que tenham gostado, e não se esqueçam de ver a demonstração;

Demo

Meus querides! Caso vocês gostem desse blog e queiram continuar me acompanhando, eu ainda escrevo, mas em outro blog. Não posto apenas tutoriais, mas continuo escrevendo e falando de vários assuntos, inclusive a blogosfera. Caso queira visitar (sério ótimo uma visita): clique aqui para ir ao blog Serenar