画像をテキストに置き換える方法

Question

幅50px、高さ100pxの金色の背景を持つdivにテキストを置くことができますか？ボックスの上にマウスを置くと画像に変わります。

また、私はそうのように隣同士にそれらを揃えることができる方法：

⬛️⬛️⬛️

⬛️⬛️⬛️

⬛️⬛️⬛️

ページ上のショップにカテゴリを持つような用途。

ありがとうございました。

Answer 1

.mainDiv{ 
 
    background-color:gold; 
 
} 
 
.mainDiv:hover{ 
 
    color:transparent; 
 
    background-image:url('https://www.gstatic.com/webp/gallery3/1.png'); 
 
}

<div class="mainDiv" height="200px" width="200px"> 
 
    Some Text<br><br> 
 
    Some Text<br><br> 
 
    Some Text<br><br> 
 
    Some Text<br><br> 
 
</div>

Answer 2

はそんなに両方の答えが働いていたこの

<style> 
    div{ 
     background-color: black; 
     height: 200px; 
     width:200px; 
    } 
    div:hover{ 
     font-size:0px; 
     background-image: url('https://www.w3schools.com/css/img_fjords.jpg'); 

    } 
</style> 
<div> 

</div>