たまにはスタイルシートのこと。
これおしゃれやんと思ったリンクがあったので、
今後自分で使うためにメモ。

マウスを合わせると背景がグイっと大きくなってぼやけます。

See the Pen rJzZvB by Yoshimune (@hachidaime) on CodePen.

内容は簡単で、マウスオーバー時にfilter:を使ってるだけです。
スムーズに動かすためにtransitionを使います。

HTML

<a href="#" class="zoom__item">
	<img src="画像URL" alt="">
</a>	
</div>

CSS

.zoom__item {
  position: relative;
  top: 0;
  left: 0;
  width: 300px;
  height: 225px;
  overflow: hidden;
  display: block;
  color: #333;
  text-decoration: none;
  float: left;
  margin: 10px;
}

.zoom__item img {
  height: 100%;
  -moz-transition-property: all;
  -o-transition-property: all;
  -webkit-transition-property: all;
  transition-property: all;
  -moz-transition-duration: 0.5s;
  -o-transition-duration: 0.5s;
  -webkit-transition-duration: 0.5s;
  transition-duration: 0.5s;
  filter: blur(0px);
}

.zoom__item:hover img {
  height: 120%;
  margin: -10%;
  filter: blur(10px);
}

divの中にimgタグを入れていますが、
backgroundでこれをやってもいいです。
ただ、backgroundだと画質が少し粗くなる印象もあるんですよね・・・。
なので、最近はimgタグを使おうかと考えています。

難しくないですが、個人的な備忘用として。
使いたい人は自由に使ってください。

[RelService] [Service]