Div Tag Within Img Tag

I need to add a text on each of the image and I have the image gallery constructed using img tags. Can't I append div tags under img tags. Similar to the one shown here :

Solution 1:

An image tag can not have child elements. Instead, you need to position the DIV on top of the image using CSS.

Example:

<divstyle="position: relative;"><img /><divstyle="position: absolute; top: 10px;">Text</div></div>

That's but one example. There's plenty of ways to do this.

Solution 2:

The img element has a self closing tag, so you can't give it child elements and expect it to work. Its content model is defined as empty. Source.

I suspect any children you specify won't be rendered because an img element is a replaced element, as mentioned in the W3C spec.

Solution 3:

Rules of good tone.

1. Use null source in IMG tag.
2. Use CSS content:"" for WebKit browsers.
3. Insert element through JavaScript. Clear in HTML does not affect.

Also you can use pseudo elements.

Example: https://github.com/Alexei03a/canvas-img

Share