最近ブログや情報サイトでよく見かける、
カーソルをあわせたときに画像がちょっとおっきくなるやつ。
CSSで簡単に実装できるんですね！

<figure>
<img src="image.jpg">
</figure>

figure {
width: 100%;
height: 0;
padding: 0 0 30% 0;
margin: 0;
background-color: #fff;
overflow: hidden;
}
figure img {
-webkit-transform: scale(1);
transform: scale(1);
-webkit-transition: .3s ease-in-out;
transition: .3s ease-in-out;
}
figure:hover img {
-webkit-transform: scale(1.3);
transform: scale(1.3);
}

縦横の値を固定しないといけないので、前の記事youtube動画をレスポンシブで表示させるでも書いた方法でレスポンシブ対応に。

こちらのサイトはデモもたくさんあってとってもわかりやすい。
ありがとうございます。

CSSのみで実装できる、画像と相性が良さそうなホバーエフェクト 15

• CODING
• CSS