Hintergrundbild aus der Mitte anzeigen

Question

Ich arbeite an einem abgerundeten Avatar mit Hover-Effekten. Standardmäßig befindet sich oben auf dem Hintergrundbild eine halbtransparente Überlagerung, die das Bild im Schwebeflug anzeigt.

Die Frage ist, wäre es möglich, das Overlay aus der Mitte der Box verschwinden zu lassen? Gerade jetzt ist es das Gegenteil.

jsFiddle

.avatar { 
 
    position: relative; 
 
    background: url("https://i.stack.imgur.com/zBjxW.jpg") center/cover no-repeat; 
 
    border-radius: 50%; 
 
    width: 200px; 
 
    height: 200px; 
 
} 
 

 
.avatar:before { 
 
    content: ""; 
 
    position: absolute; 
 
    width: 100%; 
 
    height: 100%; 
 
    left: 50%; 
 
    top: 50%; 
 
    transform: translate(-50%, -50%); 
 
    border-radius: 50%; 
 
    background-color: rgba(0, 0, 255, .5); 
 
    transition: width .5s, height .5s; 
 
} 
 

 
.avatar:hover:before { 
 
    width: 0; 
 
    height: 0; 
 
}

<div class="avatar"></div>

Answer 1

Ja, Sie könnten einen Einsatz Schatten für diese Art von Effekt nutzen:

.avatar { 
 
    position: relative; 
 
    background: url("https://i.stack.imgur.com/zBjxW.jpg") center/cover no-repeat; 
 
    border-radius: 50%; 
 
    width: 200px; 
 
    height: 200px; 
 
    box-shadow:inset 0 0 0 105px rgba(0, 0, 255, .5); 
 
    transition:0.25s 
 
} 
 

 

 
.avatar:hover { 
 

 
    box-shadow:inset 0 0 0 0 rgba(0, 0, 255, .5); 
 
}

<div class="avatar"></div>