中心からの背景画像を公開する

Question

私はホバー効果を持つ丸いアバターに取り組んでいます。デフォルトでは、背景画像の上に半透明のオーバーレイがあり、ホバー上に画像が表示されます。

質問は、ホバー上のボックスの中心からオーバーレイを消すことは可能でしょうか？今は逆です。

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

はい、あなたは効果のこの種のインセットの影を使用することができます。

.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>