CSS3のCSSフィルターを使うことで、かっこいいホバーアクションが可能です。

HTMLはこんな感じで

<div class="sample1">
    <img alt="CSS3でホバーアクション" src="(ここに画像パスを)"  />
</div>

CSSを

.sample1 img{
  transition: all 0.3s ease 0s;
}
.sample1:hover img{
  border-bottom-color: transparent;
  transform: translateY(0.15em) translateX(0.15em);
}

とすると、ボタンの上にマウスを持っていくと、ボタンがへこんだようになります。

また、HTMLを

<div class="sample2">
    <img alt="CSS3でホバーアクション" src="(ここに画像パスを)"  />
</div>

CSSを

.sample2 img{
  transition: all 0.3s ease 0s;
}
.sample2:hover img{
  opacity: 0.6;
}

とすると、ボタンが薄くなります。

合わせ技で

<div class="sample3">
    <img alt="CSS3でホバーアクション" src="(ここに画像パスを)"  />
</div>

CSSを

.sample3 img{
  transition: all 0.3s ease 0s;
}
.hover-action4:hover img{
  opacity: 0.6;
  border-bottom-color: transparent;
  transform: translateY(0.15em) translateX(0.15em);
}

とすると、へこんだ感じになりつつも半透明になります。

HTMLはこんな感じで

<div class="sample4">
    <img alt="CSS3でホバーアクション" src="(ここに画像パスを)"  />
</div>

CSSを

.sample4{

  width: 300px;

  height: 60px;

  overflow: hidden;

}

.sample4 img:hover{

  transform: scale(1.1);

  transition-duration: 0.3s;

}

とすると、画像が拡大します
こちらにも書いたように、ホバーアクションはクリック率を高めるためにも重要なので、お気に入りのホバーアクションを選んでいただけると幸いです。