ホバーすると暗転/画像が少し拡大されるパーツのマークアップとSCSS

よくある実装なのですが、毎回忘れてしまうのでメモ

コードはコチラ

ざっくり解説

htmlの略式図です

.effectable-img
  a.effectable-img__link
    img.img
    .effectable-img__info

親の枠を決めます

.effectable-img {
  width: 233px;
  height: 165px;
  overflow: hidden;
}

子要素は親要素の幅と同じなので

.img {
  width: 100%;
  height: auto;
}

ホバー時に拡大すると

a:hover {
  .img {
    transform: scale(1.2);
  }
}

最初のスタイルで枠を決めている/溢れたときの挙動を決めているので、画像が拡大されます

画像と並ぶdiv要素(effectable-img__info)が肝
親のeffectable-imgにrelativeが付いてるため

position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;

で親要素と同じ大きさになり、1つ前の要素のimgにかぶさる形になりますそれがopacity: 0のため、通常時は表示されず
hover時はopacity: 1になるので表示されるという感じですね

全然話が変わりますが、GoogleさんのCSSスタイルは

Alphabetize declarations

Google HTML/CSS Style Guide
ということで、アルファベット順なようです
jsfiddleに記載してる方は、その真似してみました
個人的にはtop,leftなどが意味的に近いものが少し離れているのは違和感を感じますが、バラツキは確かに少なくなりそうですよね

ではでは〜