<h3>Efeito inclinado nas Imagens</h3>

Hello amigos (a) mais um dia de tutorial, personalizei 2 efeitos inclinados com bordas e efeito opacity. Fica lindo nas postagens do blog.

Descanse o mouse nas imagens e confiram os exemplos


Imagem inclinada para direita

Copie o código abaixo cole antes de ]]></b:skin> e salve.

img{
opacity: 0.7;
-webkit-transition: 0.5s;
border:2px dashed #8B8989;
-webkit-transition: all 0.5s ease-out;
-moz-transition: all 0.5s ease; -o-transition: all 0.5s ease;
-webkit-border-radius: 15px;
-moz-border-radius: 1em 4em 1em 4em;
border-radius: 1em 4em 1em 4em;
}
img:hover{
opacity: 1.0;
border:2px dashed #8B8989;
-webkit-transform: rotate(7deg);
-moz-transform: rotate(7deg);
-o-transform: rotate(7deg);
-webkit-border-radius: 15px;
-moz-border-radius: 1em 4em 1em 4em;
border-radius: 1em 4em 1em 4em;
}

Imagem inclinada para esquerda



Copie o código abaixo cole antes de ]]></b:skin> e salve.

img{
opacity: 0.7;
-webkit-transition: 0.5s;
border:2px dashed #8B8989;
-webkit-transition: all 0.5s ease-out;
-moz-transition: all 0.5s ease; -o-transition: all 0.5s ease;
-webkit-border-radius: 15px;
-moz-border-radius: 1em 4em 1em 4em;
border-radius: 1em 4em 1em 4em;
}
img:hover{
opacity: 1.0;
border:2px dashed #8B8989;
-webkit-transform: rotate(-7deg);
-moz-transform: rotate(-7deg);
-o-transform: rotate(-7deg);
-webkit-border-radius: 15px;
-moz-border-radius: 1em 4em 1em 4em;
border-radius: 1em 4em 1em 4em;
}

Dicas extras de personalização:
Se deseja que o efeito apareça apenas nas imagens que você escolher altere o seguinte trecho no código:

Exemplo 1
Apague= img{
Escreva= .direita{
Apague= img:hover{
Escreva= .direita:hover{

Sempre que desejar utilizar o efeito adicione o endereço da imagem
no código abaixo.

<img src="ENDEREÇO DA IMAGEM"class="direita"/>


Exemplo 2
Apague= img{
Escreva= .esquerda{
Apague= img:hover{
Escreva= .esquerda:hover{

Sempre que desejar utilizar o efeito adicione o endereço da imagem
no código abaixo.

<img src="ENDEREÇO DA IMAGEM"class="esquerda"/>