マウスオーバーでシャッターのように開いて背景画像が現れるCSSの説明書

2014.06.11
CSS , CSS3 , WEB , マウスオーバー

はてなブログの最新記事一覧などで、よく見かける？マウスオーバーすると表紙がサッと開いて、写真やサムネイルの背景画像が現れるエフェクトに、前々から憧れていました♪

JavaScriptだったら、配布などあったのですが、CSSだとなかなか見つからず、なかば放置していました。
CSSが、大好きなので・・・言い換えれば、JSが分からないともいう。。。

最近になって、とあるサイトでそういった感じのエフェクト系が紹介されていたので、有難いことに実現することできました。

今回は、そんなマウスオーバーするとシャッターのように開いて、背景画像が表示されるCSSの説明やらポイントやらをメモっていきます。

デモはこんな感じです。

See the Pen 表紙がシャッターのように開く by webfeelfree (@webfeelfree) on CodePen.4259

このページの目次

HTMLのポイント
CSSの全体
CSSのポイント
デモ
あとがき

HTMLのポイント

<div class="demo*">
  <a href="#"><img src="画像のURL" width="***" height="***" /></a>
  <div>
    <h1><a href="#">【demo*】・・・・・</a></h1>
    <p>・・・・・</p>
　</div>
</div>

完成イメージは、ブログで使われる新着記事一覧などのリンク付きのサムネイルをイメージしてコーディングしています。
リンクが必要ないときは、<a>を外しましょう。

2か所<div>で囲んでいますが、他のタグでもできます。
適当に割り当ててください。

大きいポイントとしては、3行～6行目のように、ちゃんと<div>などで囲んだ方が汎用性やらスタイリング性やらが良くなります。

2行目の<img>の位置は、内側の<div>の前でも後でも、どちらでも大丈夫です。
セマンティックな位置に記述しましょう。

あと5行目の<p>は、今回は【demo3】のみに使っています。

CSSの全体

とりあえず【demo1】のCSS全体です。
よくわからん人は、うわ～んって、見ただけで拒絶反応が。。。
私も、そういうタイプなもんで・・・。

そんな人は、これをコピペしてそのまま使うか、次の「CSSのポイント」へ・・・どうぞ・・・。

.demo1{
  position: relative;
  overflow: hidden;
  width: 180px;
  line-height: 0;
  text-align: center;
}
.demo1 div{
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: rgba(0,0,0,0.6);
  transition: 0.3s;
  cursor: pointer;
}
.demo1 h1{
  font-size: 16px;
  padding: 0 5px;
  margin: 0;
  line-height: 1.5;
  position: relative;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}
.demo1 h1 a{
  color: #fff;
  text-decoration: none;
}
.demo1 img{
  border: none;
}
.demo1:hover div{
  top: -100%;
}

HTMLの記述でクラス名やタグを書きかえた場合は、それにあわせて書きかえましょう。

CSSのポイント

先ほどの【demo1】を分解して、ポイント（セッティング方法？）を紹介します。
変更せず、そのまま使う部分の説明は、割愛します。

.demo1{
  position: relative;
  overflow: hidden;
  width: 180px;
  line-height: 0;
  text-align: center;
}

4行目・・・背景画像の幅にあわせます。

5行目・・・リセットCSSなどを設定していない場合、表紙の下の方が、ほんの少しはみ出てしまいます。
そのはみ出した部分をなくすための記述になります。
【demo2】と【demo3】を見比べるとわかるのですが、【demo3】の表紙の下に微妙な隙間が空いていることが分かります。
気にならない場合は、省略しましょう。

6行目・・・文章を中央寄せ等にしたいときに記述します。

.demo1 div{
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: rgba(0,0,0,0.6);
  transition: 0.3s;
  cursor: pointer;
}

5、6行目・・・ここ！チェックポイントです！！
表紙をスライドさせたい方向にあわせて書きかえます。
ここは「top」「bottom」「left」「right」を指定します。
例えば
　上にスライド・・・「top: 0;」
　右にスライド・・・「right: 0;」
　左下にスライド・・・「bottom: 0;」と「left: 0;」
のように指定します。
例の場合は、便宜を図って「top」と「left」を指定しています。

7行目・・・表紙の色の設定です。
色の指定は「CSS（CSS3）で色を指定する色々な方法」を参考にしてみてください。

8行目・・・スライドの速度です。
この例だと「スライドにかける時間は0.3秒です」ということになります。

9行目・・・リンクのところにポインタを置いたときに「指のマーク」になりますよね。
ここでは「ポインタが、<div>ボックス（表紙）の上に来たら【指のマーク】になってください」という設定になります。
なので、リンクを張っていない場合は削除しましょう。

.demo1 h1{
  font-size: 16px;
  padding: 0 5px;
  margin: 0;
　line-height: 1.5;
  position: relative;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

2～4行目・・・スタイルを設定する部分です。

5行目・・・も、スタイル（行間）設定なのですが、最初で説明した「line-height: 0;」を指定してない場合、省略してもOKです。

6～10行目・・・この箇所での大きいチェックポイント！！
これは、文書を上下中央に配置しています。
この記述は、古いブラウザだと対応していない場合があるので、古いブラウザに対応したいときは・・・

  display: table-cell;
  vertical-align: middle;
  width: 180px;
  height: 150px;

と入れ替えます。
【demo2】は、こっちを使っています。
ここでの「width」「height」は、背景画像の「幅」「高さ」にあわせて指定します。

.demo1 h1 a{
  color: #fff;
  text-decoration: none;
}
.demo1 img{
  border: none;
}

ここは、スタイル設定の部分です。
必要に応じて設定してください。

また<h1>と<p>のように、文章に2種類のタグを使う場合・・・例えば、「タイトル」と「注釈」みたいな場合は、上下中央配置のCSSは使わず、個々に「padding」などのスタイルを割り当てた方がいいと思います。

【demo3】のコーティング

.demo3 h1{
  font-size: 16px;
  padding: 0 5px;
}
.demo3 h1 a{
  color: #fff;
  text-decoration: none;
}
.demo3 p{
  color: #fff;
  padding: 0 10px;
}

3、11行目が、それです。
見た目の違いなどは、デモを参考にしてみてください。