Css image hover border effect

Add a CSS Border On Hover Without Moving The Element

<div>
    <img src="http://placehold.it/110x110/DDD/FF3535&text=G%20Plus" alt="" />
</div>

div {
    box-shadow: inset 0px 0px 85px rgba(0, 0, 0, 0.5);
    -webkit-box-shadow: inset 0px 0px 85px rgba(0, 0, 0, 0.5);
    -moz-box-shadow: inset 0px 0px 85px rgba(0, 0, 0, .5);
    display: inline-block;
    border-radius: 50%;
    margin: 10% 10%;
}
img {
    width: 100%;
    height: auto;
    max-width: 110px;
    background-color: rgb(221, 221, 221);
    border: 0;
    border-radius: 50%;
}
img:hover {
    border: 8px solid rgb(255, 53, 53);
    -webkit-box-sizing: border-box;
    -webkit-transition: border 0.3s ease;
    -moz-transition: border 0.3s ease;
    -ms-transition: border 0.3s ease;
    -o-transition: border 0.3s ease;
    transition: border 0.3s ease;
}

DEMO