Borda externa - Efeito hover

[thailangodoy 1]

Boa tarde amigos,

 

Quero copiar o efeito hover, que aparece na foto de perfil do login, o qual consiste em uma borda externa, que não influencia no tamanho.

 

Tentei atribuiu o box-sizing:border-box; // ele diminui a imagem e traz a borda para dentro.

 

[Sherlock02 0]

Olá,

Segue:

.photo-effect img {
    border: 4px solid transparent;
    -webkit-border-radius:80px;
    -moz-border-radius:80px;
    border-radius:80px;
}

.photo-effect img:hover {
    border: 4px solid #777;
}

 

<div class="photo-effect">
	<img class="effect" src="https://source.unsplash.com//WNoLnJo7tS8/100x100">
</div>

Resultado: https://jsfiddle.net/du6oLjre.

Caso prefira, aplica um efeito transition para deixá-lo mais suave.

 

Abraços!

 

[thailangodoy 1]

Muito obrigado!! 

Irei aplicar o transition.