Website Development Resources
CHouseLive

Enhance photographs with a border, drop shadow and description

Eland
The Common Eland (Taurotragus oryx), also known as the Southern Eland or Eland antelope, is a savannah and plains antelope found in East and Southern Africa.

This technique of applying borders and captions to an image was inspired by Soh Tanaka's blog post entitled "5 Ways to Spice up Your Images with CSS"

<dl class="enhancement">
  <dt><img src="eland.jpg" width="317" height="500" alt="Eland" /></dt>
  <dd>The Common Eland (Taurotragus oryx), also known as the Southern Eland or Eland antelope, is a savannah and plains antelope found in East and Southern Africa.</dd>
</dl>
.enhancement{
  margin: 20px auto;
  padding:5px;
  border: 1px solid #B2B2B2;
  position: relative;
  display: block;
  height:500px;
  width:317px;
  background: #fff;
  -moz-box-shadow: 2px 2px 4px 0 #B2B2B2;
  -webkit-box-shadow: 2px 2px 4px 0 #B2B2B2;
  box-shadow:2px 2px 4px 0 #B2B2B2;
}

.enhancement dt{
  padding:0;
  margin:0;
}

.enhancement dd {
  background: #111;
  -moz-opacity:.7;
  filter:alpha(opacity=70);
  opacity:.7;
  text-align: left;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 297px;
  padding: 10px;
  margin: 5px;
  border-top: 1px solid #999;
  color: #fff;
}

If you have encountered a problem with this demonstration, or would like an amendment made to the referencing and attributions of the scripts and code used on this page, please send the CHouseLive team an email: cara_remove_@chouselive_remove_.org