Permite você inserir em suas imagens uma borda personalizada com efeito hover.
1 - Insira em seu Css o seguinte código.
/*————– INICIO - Borda nas Imagens —————*/
.borderimage{
background-color: #b8ced0;
padding: 5px;
color: #b8cedo;
margin-right: 4px;
margin-left: 4px;
margin-top: 1px;}
.borderimage{
background-color: #b8ced0;
padding: 5px;
color: #b8cedo;
margin-right: 4px;
margin-left: 4px;
margin-top: 1px;}
.borderimage:hover {
background-color:#cadde3;}
/*————– FIM - Borda nas Imagens —————*/
Lembrando que onde esta .borderimage:hover é o efeito quando se passa o mouse por cima.
2 - Mude as cores de acordo com o seu gosto.
3 - Sempre que quizer inserir borda nas imagens use o código a seguir.
<img src=“http://ENDEREÇO DA IMAGEM” class=“borderimage”>
Lembre-se de trocar onde está o endereço da imagem pela url correta.