cssアニメーション 画像がゆっくり透過する

画面にマウスを載せた時に、色を薄くする。

まず画像にアニメーションの設定をします。

.description img {
  float: left;
  margin: 0 10px 10px 0;
//アニメーション　透過
  transition-property: opacity;
//時間指定　1秒
  transition-duration: 1s;
//進行割合 easeでよい。linear などもあるが画面の上にhoverした時に薄くする程度ではほとんど関係ない
  transition-timing-function: ease;
  transition-delay: 0s;
}

そしてhover(マウスが載った時) に透過を指定します。

.description img:hover {
//透明度 0.5
  opacity: .5;
}

上記2つを分けて記載するのがポイント