画像がズラッと並んだポートフォリオサイトとか、お上品なサイトでできるだけテキストを表示させたくないデザインの場合、画像にマウスを合わせるとニュニュッと上下から画像の説明やブログタイトルを出す方法の備忘録です。

まず、HTMLとCSSでコーディング

要はレイアウトした画像の上に背景色をうっすら表示させて、その上にテキストを表示させます。

【HTML】

<div class="slidebase">
<div class="slidetext"><a href="#">Cards scattered</a></div>
<div class="slideimg"><a href="#"><img alt="サンプル画像" src="img/sample.jpg" /></a></div>
</div>

文書構文にそると、画像の説明にするならdl定義だったり、ブログタイトルならhタグなどにする必要がありますが、今回はdivのみで組みます。用途に合わせて変更ってことで。
※テキストの部分はブログタイトルを見越してリンク貼ってます。

 

【CSS】

body{
margin:100px;
line-height: 0;
}

.slidebase {
width:400px;
position: relative;
}

.slidetext {
width: 100%;
height:100%;
display: block;
position: absolute;
color: #fff;
padding:150px 0 0 30px;
background: rgba(0, 55, 185, 0.8);
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-o-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}

.slidetext a {
font-family: 'Montserrat', sans-serif;
display: block;
color: #fff;
font-size: 30px;
}

注意点はbodyに書いてる「 line-height: 0;」これがないと、画像と背景色に高さの違いがでてしまい、ずれてしまいます。あと、テキストの位置はpaddingで調整してるので、「box-sizing」を指定しています。

DEMO

英語を主体としたサイトなら、サクッとGoogleウェブフォントを指定して、オリジナルなデザインを演出するのもアリですね(・∀・)

jQueryの「slideToggle」を使用します。

簡易的に上下に動くアニメーションを指定できる「slideToggle」を使用します。

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

<script type="text/javascript">
     jQuery(function(){
  jQuery(".slidebase").hover(function(){
      jQuery(this).find(".slidetext").slideToggle("fast");
   });
});
</script>

本家jQueryを呼び出して、さらに「slideToggle」を表示させます。アニメーションさせたいclass（今回は.slidetext）を指定して、アニメーションタイプを指定します（今回はfast）
「fast」「normal」「slow」「数値入力」と値を変更できます。詳しくは「jQuery日本語リファレンス」に載ってます。

DEMO

何をしてるかというと、「.slidetext」を「display:none;」で非表示になってたのを「display:block;」で表示させ、その際にニュニュっと出てくるアニメーションをつけてくれてるって事です。

アニメーションの出現の上下を変えたい場合

先ほどのデモでは、上から下のアニメーションですが、下から上に変えたい場合は、出現させたいclassに以下の記述を加えれば上下逆になります。

.slidetext {
bottom: 0; /*下を基準にするので下から出てくる*/

}

横幅可変のタイプも作成しました

この手のアニメーションを使うサイトは横幅可変タイプやレスポンシブルデザインが多いかと思うので、横幅可変サイズも作成しました。

DEMO

変更したのはCSSのみです
【CSS】

a:link{text-decoration:none;}

body{
line-height: 0;
}

.slidebase {
max-width: 800px; /* 最大幅を追加*/
min-width: 240px; /* 最小幅を追加 */
position: relative;
}

.slidetext {
width: 100%;
height:100%;
display: none;
position: absolute;
color: #fff;
bottom: 0;
padding:150px 0 0 30px;
background: rgba(0, 55, 185, 0.8);
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-o-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}

.slidetext a {
font-family: 'Montserrat', sans-serif;
display: block;
color: #fff;
font-size: 30px;
}

.slideimg img{
width:100%;/* 横幅の値を取得*/
}

変更点はbodyの横幅を最大値と最小値を指定して、「.slideimg img」に「width:100%;」を指定して「.slidebase」の最大値と最小値に合わせるようにしています。

まとめ

テキスト部分に「padding」を指定しているせいか、アニメーション速度を遅くすると、少しカクっとなっちゃったり、スマホやタブレットで表示させる場合は、ロールオーバーではなくタイトルは表示させとくのが正しい気がするので、レスポンシブ対応とまではいかないなど、改善点はありありですが・・・jQueryを使えば、簡単にスライドアニメーションを作成することができました。改善の余地はありですが、今回は以上です。