Borda Hover Nas Imagens Do Blog

créditos

Olá gente, continuando com a maratona de tutoriais, trouxe agora como colocar efeito de borda hover nas imagens do blog, exemplo:

quando passa o mouse:

{ignorem o efeito opacity, só muda as bordas mesmo}

esse efeito fica em todos tipos de imagens inclusive imagens de afiliados e as de posts, é legal né?!

❤Vamos continuar lendo para aprender?

1ª Vá em Modelo -> Editar HTML -> Prosseguir -> Aperte Ctrl + F (Nova interface do blogger)

ou

Design -> Editar HTML -> Aperte Ctrl + F ( Antiga interface)

Procure por ]]></b:skin>

Ao encontrar cole esse código em cima:

.borda{-webkit-border-radius: 25px;

-webkit-border-top-right-radius: 1px;

-webkit-border-bottom-left-radius: 1px;

-moz-border-radius: 25px;

-moz-border-radius-topright: 1px;

-moz-border-radius-bottomleft: 1px;

border-radius: 25px;

border-top-right-radius: 1px;

border-bottom-left-radius: 1px;

-webkit-transition-duration: .90s;

}

.borda:hover {-webkit-border-radius: 1px;

-webkit-border-top-right-radius: 25px;

-webkit-border-bottom-left-radius: 25px;

-moz-border-radius: 1px;

-moz-border-radius-topright: 25px;

-moz-border-radius-bottomleft: 25px;

border-radius: 1px;

border-top-right-radius: 25px;

border-bottom-left-radius: 25px;

-webkit-transition-duration: .90s;

}

 Para usar a imagem com o efeito:

<img src="URL DA IMAGEM AQUI" class="borda" />

Beijos, espero que tenham entendido o tutorial *w*