So ersetzen Sie Text mit Bild

Question

Ich würde gerne wissen, können Sie einen Text in einem div mit einem goldenen Hintergrund mit einer Breite von 50px und einer Höhe von 100px haben und wenn Sie den Mauszeiger über die Box zu einem Bild ändert.

Auch, wie kann ich sie ausrichten nebeneinander in etwa so:

⬛️⬛️⬛️

⬛️⬛️⬛️

⬛️⬛️⬛️

Für Anwendungen wie Kategorien in einem Geschäft auf einer Seite.

Danke.

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

versuchen, diesen

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