Edit in JSFiddle

<div>
  <img src="http://pic.rabbitalk.com/thumb/thumb_x57IZfysOoD1.jpg">
  <ul>
    <li>ハムスター</li>
    <li>3ヶ月</li>
    <li>草原を走る</li>
  </ul>
</div>

body {
  margin:0;
  padding:0;
}
div {
  margin:0;
  padding:0;
  width: 598px;
  position: relative;
}
div img {
  margin:0;
  padding:0;
  width: 598px;
}
div ul {
  margin:0;
  padding:0;
  width: 598px;
  position: absolute;
  bottom: 0;
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.6) 80%, rgba(0, 0, 0, 0.1));
  list-style: none;
  color: white;
}
div ul li {
  margin:1em;
}