CODEWITHSUNDEEP
csshtml
Cøded Numbers
Cøded Numbers

Reputation: 47

How to replace text with image

I would like to know can you have a text in a div with a gold background with a width of 50px and height of 100px and when you hover over the box it changes to an image.

Also how can I align them next to each other like so:

⬛️⬛️⬛️

⬛️⬛️⬛️

⬛️⬛️⬛️

For uses like having categories in a shop on a page.

Thanks.

Upvotes: 1

Views: 958

Answers (2)

Yash Parekh
Yash Parekh

Reputation: 1529

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

Upvotes: 1

Nihal
Nihal

Reputation: 5334

try this

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

Upvotes: 1

Related Questions