How To Add Caption Above The Image With HTML And CSS

Rohan Mod
11 Jan, 2014

How to add captions above the images not below. It is possible to do it with HTML and CSS.

How To Add Caption Above The Image With HTML And CSS
How To Add Caption Above The Image With HTML And CSS
It is by default in blogger that when we add caption on images it comes below the image. So today we are going to make some changes. You will be able to add captions above the image, then the below. It will not change the default code of blogger for a caption, but you can do it for any image that you use in your post.


For example, when we add caption on images to blogger post, then it looks like this.

caption below image
Caption below image

As you can see captions are below the image, So the main goal of this post is to move the caption above the image. It has been possible through CSS using before and after elements. So you have to manually add this code.

How to add captions above the image.

Below is the html code. Copy the html code and paste it in the blogger post (html mode). And now change the IMAGEURL with the ORL of your image. Now copy the CSS code and go to blogger template. Then click on edit template and hit ctrl+f. Now search for ]]></b:skin> and paste the CSS code above it and you are done.



HTML Code

<li title="Somewhere near Keswick"> <!--content of 'title' will be used as the caption, if the image is linked you can use the title of the anchor as the caption instead -- <li><a href="large-image.jpg" title="Somewhere near Keswick">-->
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEipTaeooQFCebKn04H5vXipFCYow8FF5RwqZJCnKcMwUAgheyKB3-gRNp8-CNmjLthw3Xqtohzzzcb3oWwD1SnQPzWEDpXgSD5gEep71dBsE-uSvRWx0sOtFhDxtjnC5KmYuC4uCCH0swc/s320/kissing-teen-couple-romantic-lovers-girl-boy-sexy.jpg" width="200" height="133" alt="Somewhere near Keswick">
</li>


CSS Code

li:before{ /* if you want the caption to appear above the image use li:before , if you're using the title attribute from a link, then change this to a:after or a:before */
content: attr(title);
display: block; /*places the caption on its own line*/
}

Customization


  1. You can customize this code in many ways.
  2. Type your caption on the place of yellow background text.
  3. Insert your image URL on the place of green background color url.
  4. That's it. You are done.


So it was a magic of CSS. You can do many new and creative things with HTML and CSS like we inserted captions above the image.
Next Post Previous Post