css-transitions - ホバー時にトランジションを設定する方法

Question

ホバー時に不透明度遷移を設定したいのですが、方法がわかりません。任意のヘルプが適用されます。

<div><img src="http://codezona.com/wp-content/uploads/2013/03/rusalkasmall.jpg" alt=""></div>
img {
 display:block;
}
div {
  position:relative;
}

div:hover:before {
  content:"";
  opacity:0.1;
  position:absolute;
  width:170px;
  height:100px;
  background:#ebe316; 
}

デモ