Div tag in img tag

Question

I need to add text to each image, and I have an image gallery created using img tags. Can't add div tags in img tags. Similar to the one shown here:

<img id="img1" class="img1_1" src="hello1_1"> <div class="textDesc">HELLO1_1</div> </img> 

Although the div is added to the img tag, but I do not see the text "HELLO1_1" in the image.

Please help me? If you need source code, I can share it with you.

Here is the link to test the script: http://jsfiddle.net/XUR5K/9/

Answer 1

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

I suspect that any child elements you specify will not be displayed, because the img element is a replaced element, as specified in the W3C specification.

Answer 2

An image tag cannot have children. Instead, you need to put the DIV on top of the image using CSS.

Example:

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

This is just one example. There are many ways to do this.

Answer 3

Good manners.

• Use null source in IMG tag.
• Use CSS: "" content for WebKit browsers.
• Paste an element through JavaScript. Clear in HTML is not affected.

You can also use pseudo-elements.

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