YJL

2.2.1   Gradient

It’s really simple to make a gradient background for an element:

div.image-wrapper > div.caption {
  background-image: -webkit-gradient(linear, left bottom, right bottom, from(#000), to(#fff));
  background-image: -moz-linear-gradient(left,  #000,  #fff);
  background-image: linear-gradient(left,  #000,  #fff);
}

You can see the gradient is in place of background-image, generally, gradients could be applied on any kind of CSS image property.

2.2.2   Position

When I tried to make this caption to be placed over the photo, I tried to simply put a new caption element right after image and use position: relative to move the caption element up. But this results a problem, it will leave an blank (white) space at where the caption’s original place. One solution is to use a wrapper and compensate with margin-bottom. See the code as follows:

<div class="image-wrapper">
  <img>
  <div class="caption">Caption</div>
</div>

<style>
  div.image-wrapper{
    margin-bottom: -3em;
  }

  div.image-wrapper > div.caption {
    position: relative;
    top: -3em;
  }
</style>

This would do the trick. I also tried to directly use margin on caption to compensate, but the caption would go below the image. I couldn’t figure out the reason, therefore I came out the resolution as shown above.

2.2.3   More touch-ups

The following CSS sets the text style, white text, shadow to increase the readability, opacity at 75%, align to center. margin to make sure this caption strip stay on the edges of photo not image element, this would look better.

div.image-wrapper > div.caption {
  background-color: #000;
  color: #fff;
  text-shadow: #000 1px 1px 0;
  opacity: 0.75;
  font-size: 2em;
  text-align: center;
    margin: auto 6px;
  padding: 0 6px;
    height: 1.4em;
    overflow: hidden;
}

The background-color is a fail-back option for browsers do not support gradient, so visitors can still see text in white on black.

What if the caption has long length content? height and overflow could ensure only one-liner, height has to be same as line-height.

You might not want the photo to be covered by the strip, you might want the visitor to view the image without the caption. The following code uses CSS3 transition module to add a nice effect, the caption would fade out when cursor hovers the image:

div.image-wrapper > div.caption {
  -webkit-transition-property: opacity;
  -webkit-transition-duration: 0.5s;
  -moz-transition-property: opacity;
  -moz-transition-duration: 0.5s;
  -o-transition-property: opacity;
  -o-transition-duration: 0.5s;
  transition-property: opacity;
  transition-duration: 0.5s;
  }

div.image-wrapper:hover > div.caption {
  opacity: 0;
}

This effect could also be achieved by using JavaScript, but if you can use simple few lines, why bother to reinvent the wheel?

You can also use CSS transform to rotate the image a bit:

Zebra Butterfly by San Diego Shooter, on Flickr

<div class="image-wrapper" style="-webkit-transform: rotate(15deg); -moz-transform: rotate(15deg); -o-transform: rotate(15deg); width: 500px; opacity: 0.5; margin: auto;">
<a href="https://www.flickr.com/photos/nathaninsandiego/4526594659/" title="Zebra Butterfly by San Diego Shooter, on Flickr"><img src="http://farm5.static.flickr.com/4065/4526594659_eb88185182.jpg" width="500" height="333" alt="Zebra Butterfly" /></a>
<div class="caption">Zebra Butterfly by San Diego Shooter, on Flickr</div>
</div>

2.2.4   Complete CSS

div.image-wrapper{
  margin-bottom: -3em;
}

div.image-wrapper > div.caption {
  background-image: -webkit-gradient(linear, left bottom, right bottom, from(#000), to(#fff));
  background-image: -moz-linear-gradient(left,  #000,  #fff);
  background-image: linear-gradient(left,  #000,  #fff);

  position: relative;
  top: -3em;

  background-color: #000;
  color: #fff;
  text-shadow: #000 1px 1px 0;
  opacity: 0.75;
  font-size: 2em;
  text-align: center;
  margin: auto 0;
  padding: 0 6px;
  height: 1.4em;
  overflow: hidden;

  -webkit-transition-property: opacity;
  -webkit-transition-duration: 0.5s;
  -moz-transition-property: opacity;
  -moz-transition-duration: 0.5s;
  -o-transition-property: opacity;
  -o-transition-duration: 0.5s;
  transition-property: opacity;
  transition-duration: 0.5s;
}

div.image-wrapper:hover > div.caption {
  opacity: 0;
}