using title attribute of an img as image legend?

Question

I'd like to use the title attribute content of an img tag to write a legend under the image:

<img title="This is my cat's legend" src="pet-cat-eye.jpg"/>

must be displayed as bellow :

  +--------------+
  |              |
  |     _ _/|    |
  |    \'o.0'    |
  |    =(___)=   |
  |      U U     |
  +--------------+
This is my cat's legend

And i'd like to use CSS only. Is it possible to achieve ?

I've tried some experiment around the img[title*=legend] but did not get to be displayed as I would like to...

There's no way to do this in pure CSS. – BenM Jan 08 '19 at 15:28 — BenM, Jan 08 '19 at 15:28
possible with javascript/jquery – Naga Sai A Jan 08 '19 at 15:28 — Naga Sai A, Jan 08 '19 at 15:28

Djamel · Accepted Answer · 2019-01-08T15:57:23.867

-1

Hi and welcome to StackOverFlow !

The image attributes aren't mean to be displayed under the picture.
Instead you could use something like a <figcaption> under the image declaration to put it under your picture.

With this in mind, you code your code will kind of look like this :

<figure>
  <img alt="cat picture" src="pet-cat-eye.jpg"/>
  <figcaption>This is my cat's legend</figcaption>
</figure>

Let me know if that work !

For further note : The title attribute is used when you mouse hover a picture as a tooltip.

edited Jan 08 '19 at 15:57

answered Jan 08 '19 at 15:27

Djamel

798
8
21

`` shouldn't be used for this, we have [`
` and `
`](https://www.w3.org/TR/html5/grouping-content.html#the-figure-element) which are designed for this.
– Quentin Jan 08 '19 at 15:40
"title isn't really often used on an image" — It is used quite a lot. – Quentin Jan 08 '19 at 15:41
1

"The alt attribute stand for the case were it's not possible to load the picture" — … so its wildly inapropriate for the purpose the OP intends. `title` is a better fit. – Quentin Jan 08 '19 at 15:41
1

I think Crawlers don't mind if the caption is in a `` tag, as long as it is after the `` tag and they are both in a container, like a `
`
– xaddict Jan 08 '19 at 15:45
1

@xaddict — It's possible to write an HTML document with nothing by `` and CSS. Crawlers won't mind about that either. That doesn't make it a good idea. – Quentin Jan 08 '19 at 15:47
@quentin Have edited has suggested – Djamel Jan 08 '19 at 15:48
1

Thanks all for your answers, I'll go and choose the latest
/ solution.
– McGivrer Jan 14 '19 at 12:54

using title attribute of an img as image legend?

1 Answers1