Home » Blogger Tutorials, Tricks and Hacks » Blogger Images / Photos Tricks » Adding Labels to blogger (blogspot) images with hovering text

Welcome to our AllBlogTools.com v.3 new version, We are still in beta, please contact us to report an error.

|| View All Tutorials ||

Adding Labels to blogger (blogspot) images with hovering text

Adding Labels to blogger (blogspot) images with hovering text

1 Star2 Stars3 Stars4 Stars5 Stars

Report Error


We all post images with in our posts, and some times we need to label this images, but not all of us can use graphic editors or don’t just have the time to do it, so we’ll learn in this tutorial how to label our images using a small code with out using any photo editing soft wares.

you can look at the following image to see how the label will look like,

My Label

If you checked the image and the text you’ll find that the text is not a part of the the image but it added on the image as a second layer,
you can try to select it to make sure.

the code to do it is too easy but to use it you need to know

1. Image width and height in pixels.

2. Image Url ( Sample: http://www.ImageHostingSite.com/file/image.jpg)

Now when you going to write your post, you must notice that on the post writing window there are two modes, Compose and Edit Html.

Check the following image.

Click here to zoom

you’ll start write you post in Compose mode and once you want to add an image Labeled to your to your post you’ll change your posting mode to Edit Html.

And enter the next code,

My Label

And this code is the same one used here on this tutorial for the image sample.

and here is what you will need to change in the code,

width: Put your image width

height: Put your image width

background:url(Image URL Here) Put your image url without any spaces

color:#ffffff change the -ffffff- to your favorite color, you can get your color code from our html color code generator here

font-size:30px Change 30px to any size you want.

line-height:3em Your label position on the image, change 3, you can change it to 1 for the top or for 4 of more for the bottom

text-align:center you can move your text by changing center to left or right.

My Label Just enter your label here.

That’s it. now go back to Compose mode to continue your post,

Or if you need More Optimization We can add transparency effects to the label. by adding the next line to the code


so the code will be

My Label

we’ll get the next result.

My Label

We set the transparency to 75% you can change it too.

i with this tutorial can help you. and if you need any help, leave a comment here.

Liked It ? Please Share


4 Responses | Post A Comment | Subscribe To Comments RSS Feed

  1. nice trick …..
    but it seems not fair….

    funny scraps
    A blog for all about humor and funny scraps….

  2. nice info…

  3. punet says:

    mate could you please increase textarea height

  4. DD says:

    Nice tips!

Comments will be closed off on this post 365 days (1 year) after it is published. Apologies to this, but it's all about avoiding a growing comment spam problem. See our most recent posts where you can comment here