あれっhoverしたときにtransitionが効かない！？

hoverさせたときにtransitionが効かなくて困った時の話です。

動かなかったコード

index.html

<div class="test">
 <a href="http://xxxxxxxxx" class="test-link">
  <img src="../image/test.png" alt="テスト">
　</a>
</div>

style.scss

.test{
transition: opacity .3s linear;
 &:hover{
 opacity:.8;
 }

のように、親クラスにtransitonをあてても効きませんでした。
最終的に下記のコードに書き換えたらtransitonが効きました。

stye.scss

.test{
  img{
    transition: all .3s linear;
    &:hover{
      opacity: .8;
    }
  }

あぁ間違っていたんだなとcodepenで再現しようとしたら、上記の書き方でも動いたんですよね。

See the Pen imgにhoverをあてる by TakahiroOkada (@okalog) on CodePen.

結論、原因がよくわからなくなってしまったんですがとりあえず今は狙った動きができればOKとします。
もし、transionが効かない際には、imgにtransitionをあてるといいかもです。