Material Design Lite

<html>
<head>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://code.getmdl.io/1.1.1/material.indigo-pink.min.css">
<script defer src="https://code.getmdl.io/1.1.1/material.min.js"></script>
<style>
.dummy-card-image.mdl-card {
  width: 300px;
  height:300px;
   background: url('http://tutorialsplane.com/wp-content/uploads/2016/04/woman-1149910_640.jpg') center / cover;
}
.dummy-card-image > .mdl-card__actions {
  height: 50px;
  padding: 15px;
  background: rgba(0, 0, 0, 0.2);
}
.dummy-card-image__filename {
  color: #fff;
  font-size: 15px;
  font-weight: 400;
}
</style>
</head>
<body>


<div class="dummy-card-image mdl-card mdl-shadow--2dp">
  <div class="mdl-card__title mdl-card--expand"></div>
  <div class="mdl-card__actions">
    <span class="dummy-card-image__filename">Picture.jpg</span>
  </div>
</div>                            

</body>
</html>