イメージをスパンテキストに重複させる

Question

hoverをHERE以上に設定した場合、imageは中央に配置する必要があります。また、HEREのテキストは、imageのみが表示されるため、消える（重複する）ようにしてください。どのようにこれらの2つの問題を動作させるには？

.eee span { 
 
\t font-weight: 700; 
 
\t font-size:2em; 
 
} 
 

 
.ggg { 
 
color: yellow; 
 
background: red; 
 
} 
 

 
.hhh { 
 
text-align: center; 
 
color: #fff; 
 
background-color: black; 
 
} 
 

 
.hhh:hover { 
 
background-color: green; 
 
background-image: url(http://via.placeholder.com/60x60); 
 
background-repeat: no-repeat; 
 
text-align: center; 
 
}

<div class="eee"><div class="fff"><span class="ggg">?</span> 
 
<span class="hhh">HERE</span> 
 
</div> 
 
</div>

Answer 1

使用background-position:centerテキストを非表示にする画像やcolor: rgba()を中央に

.eee span { 
 
\t font-weight: 700; 
 
\t font-size:2em; 
 
} 
 

 
.ggg { 
 
color: yellow; 
 
background: red; 
 
} 
 

 
.hhh { 
 
text-align: center; 
 
color: #fff; 
 
background-color: black; 
 
} 
 

 
.hhh:hover { 
 
background-color: green; 
 
background-image: url(http://via.placeholder.com/60x60); 
 
background-repeat: no-repeat; 
 
background-position:center; 
 
color:rgba(0,0,0,0); 
 
}

<div class="eee"><div class="fff"><span class="ggg">?</span> 
 
    <span class="hhh">HERE</span> 
 
</div> 
 
</div>

Answer 2

これを試してみてください：

.eee span { 
 
\t font-weight: 700; 
 
\t font-size:2em; 
 
} 
 

 
.ggg { 
 
color: yellow; 
 
background: red; 
 
} 
 

 
.hhh { 
 
text-align: center; 
 
color: #fff; 
 
background-color: black; 
 
} 
 

 
.hhh:hover { 
 
background-color: green; 
 
background-image: url(http://via.placeholder.com/60x60); 
 
text-align: center; 
 
background-position:center; 
 
color:rgba(0,0,0,0); 
 
}

<div class="eee"><div class="fff"><span class="ggg">?</span> 
 
<span class="hhh">HERE</span> 
 
</div> 
 
</div>