CSS Image Captions with Gradients and Transparent Backgrounds for Blogger/Blogs

You can add a semi-transparent white on black caption to your images using simple CSS. The opacity of the caption background can be changed by modifying the alpha parameter in background-color’s rgba attribute.

1. <style>
2. .image {
3.   width:600px;
4. }
5. .image .black {
6.   position: relative;
7.   left: 0;
8.   bottom: 60px;
9.   width: 100%;
10.   padding: 10px 20px;
11.   height: 40px;
12.   background-color: rgba(0, 0, 0, 0.6);
13.   filter: progid:DXImageTransform.Microsoft.gradient
14.           (startcolorstr=#7F000000,endcolorstr=#7F000000) 9;
15.  }
16. .image .black a { 
17.   color: white;
18.   font-size: 18px;
19.   text-decoration: none;
20.   outline: none;
21.   font-family:georgia;
22. }
23. .image .black .follow {
24.   margin-top: 5px;
25.   position: absolute;
26.   right: 10px;
27.   top:30px;
28.   font-size: 12px;
29.   font-family:verdana;
30. }
31. </style>
32. <div class="image">
33.   <img src="img.png">
34.   <div class="black">
35.     <a href="#">
36.       Image Caption
37.     </a>
38.     <a href="#" class="follow">
39.       Image Credit →
40.     </a>
41.   </div>
42. </div>

Instead of transparent backgrounds, you can even have fading gradients that transition from black to white much like the lower thirds in videos. Add this snippet to the CSS.

background: -webkit-gradient(

    linear,

    left bottom,

    left top,

    color-stop(1, rgba(0,0,0,0.0)), /* Top */

    color-stop(0, rgba(0,0,0,1.0)) /* Bottom */

);

/* Gecko */

background: -moz-linear-gradient(

    center bottom,

    rgba(0,0,0,1.0) 0%, /* Bottom */

    rgba(0,0,0,0.0) 100% /* Top */

);


End.

[ content source - labnol.org ]