webfeelfree

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

img_20140610

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

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

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

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

デモはこんな感じです。

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

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行目が、それです。
見た目の違いなどは、デモを参考にしてみてください。

.demo1:hover div{
  top: -100%;
}

最後、ここも重要な部分。
マウスオーバーしたときのスライド設定です。

先ほど「top」「bottom」「left」「right」の設定をしましたよね。
その設定にあわせたプロパティを記述します。

さっきの例とあわせてみると・・・
 上にスライド・・・「top: -100%;
 右にスライド・・・「right: -100%;
 左下にスライド・・・「bottom: -100%;」と「left: -100%;
ということになります。

ざっくりとですが、以上、セッティング的説明書はここまでになります。

重複する部分がありますが、「上下中央配置」や「不透明設定」、「スライドのエフェクト設定」は、CSS3を使っていて、古いブラウザには対応していない場合があるので注意してください。

デモ

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

あとがき

色々と苦戦して、実現することは出来ましたが、憧れだった割には、実際、私のブログってそんなに素敵な画像を使用していないので使えるかなぁ~なんて、震えていました。。。

せっかく、作ったので、有効活用したいと思います。

コーティングセンスのない私には、上出来でした。
あとは、コーディングセンスのある後続コーダーさんに期待します。

参考
CSSのみで実装するキャプションエフェクト 20 | NxWorld
[CSS]たった3行のスタイルシートで高さ不明の要素に対して天地中央に配置するテクニック(IE9にも対応) | コリス
【テキストを縦中央揃え】にするときに、【複数行のテキスト】でも!【親要素】がなくても! できるやり方!! | LogicA - jQuery中心のWeb考察生活 -

最新記事

読まれている記事

ツイッター

カテゴリー