[CSS]アイデアが面白い！画像に美しいインタラクションを加えるスタイルシート

サイト構築 -CSS

Post on:2013年10月18日

sponsorsr

風景写真など、普通の画像の上にグリッドを描き、各マス目をホバーした際に尾ヒレのようにフェードで追従させるエフェクトが美しいスタイルシートを紹介します。

便利になるとかそういった類いのものではありませんが、ちょっとした何かに使ってみたいですね。
JavaScript無しというのはポイント高いです。

デモのアニメーション

実際の動作は下記ページで確認できます。
デモはCSS3対応ブラウザでご覧ください、Chromeが一番美しくエフェクトを描画します。

LeTrailing Effect

実装はシンプルで、あえて難点をあげれば空divを数多く使うことでしょうか。

HTML

画像はbodyの背景で表示されているので、HTMLはグリッドを描くdivだけです。

<body>
<div class="div"></div>
<div class="div"></div>
...
...
<div class="div"></div>
<div class="div"></div>
</body>

divは必要に応じて増やしてください。

CSS

グリッドのサイズやカラーはスタイルシートで設定します。

body {
  background-image:url(http://666a658c624a3c03a6b2-25cda059d975d2f318c03e90bcf17c40.r92.cf1.rackcdn.com/unsplash_524010c76b52a_1.JPG);
  background-size:cover;
  margin:0;
}
.div {
  width:2vw;
  height:2vw;
  transition:all 2s ease;
  border-left:1px solid #CCFFFF;
  border-top:1px solid #CCFFFF;
  opacity:.3;
  float: left;
}

.div:hover{
  background-color:white;
  transition:all 0s ease;
}