How to make images searchable via Ctrl+F

Question

I have a page with a large products table. Each product is represented by an image.

I would like to make each product name searchable using the browser's "search in page" feature. When searching for a product name, the user should end up at the respective image.

I can not add a product name that is visible as text (the name is already very prominently on each image) but can add text elements that are not visible.

Is there a robust way to do this?

Answer 1

The solutions here have the problem that the user can't tell they've found something, since the text they're searching for is hidden behind the image. If there's 12 images on screen, it's not obvious which one has matched their search.

I do something similar, but I just have transparent text above the image. <p style="color:transparent">My product title</p>.

That way when the browser scrolls to the right region, the user can also see a blue selection growing around the text as they type it.

(In Chrome at least, the "transparent" text becomes visible once it's selected)

Answer 2

How about hiding some text behind the image? Something like this.

<div class="image-block">
   <div class="img-description">Some text.</div>
   <img>
</div>

.image-block {
   position: relative;
}

.img-description {
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
}

.image-block img {
  position: relative;
}

Basically, this will put the image over the img-description element, so you can still search and find it.