이미지를 스팬 텍스트와 겹치게하십시오

Question

hover을 HERE 이상으로 설정하면 image이 중앙에 위치해야합니다. 그리고 두 번째 문제는 HERE 텍스트가 사라져야한다는 것입니다 (중복 됨). image 만 표시되어야합니다. 이 두 가지 문제를 해결하는 방법은 무엇입니까?

.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

이 시도 :

,536,

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