/jsbin.joqew.css

## jsbin.joqew.css
figure {
  position: relative;
}

.box {
  position: relative;
  height: 300px;
  width: 300px;
}

.fig-img {
  position: absolute;
  height: 300px;
  width: 300px;
}

.trans {
  position: absolute;
  height: 100%;
  width: 100%;
  background: rgba(0,0,0,0.6);
  -webkit-transition: all .5s ease-in;
}

.box:hover .trans {
  background: rgba(0,0,0,0);
  -webkit-transform: .5s ease-in;
}


## jsbin.joqew.html
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  <figure>
    <div class = "box">
    <img class = "fig-img" src = "http://static.tumblr.com/nljhkjv/z0Jlpk23i/logo" alt = "star" />
    <div class = "trans"> </div>
    </div>
  </figure>
</body>
</html>
	figure {
	position: relative;
	}

	.box {
	position: relative;
	height: 300px;
	width: 300px;
	}

	.fig-img {
	position: absolute;
	height: 300px;
	width: 300px;
	}

	.trans {
	position: absolute;
	height: 100%;
	width: 100%;
	background: rgba(0,0,0,0.6);
	-webkit-transition: all .5s ease-in;
	}

	.box:hover .trans {
	background: rgba(0,0,0,0);
	-webkit-transform: .5s ease-in;
	}
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<title>JS Bin</title>
	</head>
	<body>
	<figure>
	<div class = "box">
	<img class = "fig-img" src = "http://static.tumblr.com/nljhkjv/z0Jlpk23i/logo" alt = "star" />
	<div class = "trans"> </div>
	</div>
	</figure>
	</body>
	</html>