リンク画像にマウスホバーすると画像がふわっと(重要)変化する方法 #JavaScript

これからすること

ユーザビリティの観点から、リンクできる画像やボタンなどのパーツには ”リンクできそう” な見た目や演出が要求されるのですが顧客受けが良いのか
画像にマウスのカーソルを乗せるとふわっと変化する
を求められる場面が結構あります。
ホバーした時に画像を変えるだけなら

$(function(){
  $('a img').hover(function(){
    $(this).attr('src',$(this).attr('src').replace('_off','_on'));
  },function(){
    $(this).attr('src',$(this).attr('src').replace('_on','_off'));
  });
});

img01_on と img01_off という2種類の画像を用意して JSに ↑ を書くだけで対応できるのですがふわっとすることなく一瞬で変わってしまします。

解決方法(JS不要)

See the Pen poJgWeQ by sphenisc (@sphenisc) on CodePen.

CSSでホバーしていない状態の画像を上から被せておき、ホバーするとimgタグで入れた方の画像が現れる仕組みになっています。

  transition: all 1s;

の部分をいじれば変化のさせ方を変えることができます。

ul li a:hover::after {
  opacity: 0;
}

の部分に height:0; を追加するだけでカーテンが上がるような動きにできます。