Image Caption
Almost all famous news websites always display images with a caption box that is aligned at the bottom of the same image. These image captions provide extra information about the images displayed on the web pages. You can quickly add these types caption over image in your images using CSS and HTML.
Caption on bottom side of image
The following CSS code display caption text below the image.
Source Code
Caption on top side of the image
The following CSS code shows the caption overlay on the top side of the image
Source Code
You can use the example-1 HTML tag with the above CSS code.
Position text over an image
Source Code
Caption on Right side of the image
Source Code
You can use the example-1 HTML tag with the above CSS code.
Caption on Left side of the image
Source Code
You can use the example-1 HTML tag with the above CSS code.
Caption display only on text width
Source Code
You can use the example-1 HTML tag with the above CSS code.
Image caption hover effects
The following code shows how to display caption while mouse hover the image.
Source Code
Full image overlay caption
Source Code
You can use the above example HTML code with this CSS code
Image caption with Link
The following CSS code display an image caption with a link inside the caption area.