2015.09.04
css

画像にマウスを乗せると下からスライドして出てくるのをCSSだけで設置

css045
以前、こちらでjQueryを使った方法を紹介しましたが、実は先にCSSだけでソースを作成しようと試みました。ただ「画像に」マウスを乗せてコンテンツが動く方法が見つからず断念。
どなたか知っていたら教えてほしいくらいです・・・。

今回紹介するのは厳密には「画像に」マウスを乗せるのではなく、画像の上にある色がついた部分にマウスを乗せると下からにょきっと出てくる仕様です。

きっと使える場面があると思いましたのでソースを紹介します。

CSSだけでマウスオーバーでスライドアップするアニメーション

ソースはカスタマイズしやすいようにシンプルにしてあります。
デザイン面では物足りないと思いますので装飾などはCSSでしてみてください。

HTMLソース

<div class="box">
   <img src="http://ri-mode.com/photos/files/2015/04/scenery024.jpg" />
   <div class="slideup">
      <span>ここにマウスを乗せてね... &gt;&gt;</span>

      <div class="slideup_content">

<!--ここにスライドアップしたときに表示したい内容を記述-->

      </div>
   </div>
</div>

slideup_contentクラスの中はサンプルのように自由にHTMLを記述できます。
aリンクも可能です。

CSSソース

.box {
width:600px;
height:400px;
position:relative;
overflow:hidden;
}
.box .slideup{
width:600px;
height:400px;
background:rgba(32,178,170,0.9);
position:absolute;
top:365px;
left:0;
color:#fff;
-webkit-transition: 0.2s;
-moz-transition:  0.2s;
-ms-transition: 0.2s;
-o-transition: 0.2s;
transition: 0.2s;
}
.box .slideup:hover {
top:0;
background:rgba(32,178,170,0.8);
}
.box .slideup span {
margin:5px;
padding:5px;
text-align:center;
font-weight:bold;
display:block;
}
.box .slideup:hover span {
display:none;
}
.slideup_content {
}

CSS解説

CSS部分についてざっくり説明します。

  • 4行目と11行目
    親要素の.boxでposition:relative;、子要素の.slideupでposition:absolute;を。
  • 10行目と23行目
    backgroundの色をrgbaで指定します。rgbaを使うと最後の値で背景色の透明度が指定できるのがポイント。今回は#20b2aaの色を使用したかったのでこちらのようなサイトでrgbに変換しました。
  • 12行目
    top:365px;はheight:400px;に対してどのくらい見せたいか。値が小さいほど色がついた部分が多く表示されます。数字を変更していろいろ試してみるのも良いかも。
  • 15行目~19行目
    transitionはCSSのアニメーションです。クロスブラウザのため5行になってしまいます。
  • 22行目
    top:0;は.slideupにマウスを乗せたときにスライドアップして画像を覆います。デザインによっては0ではなくても良いですね。
  • 33行目
    今回はスライドアップしたらspan部分を非表示にしました。
  • 35行目以降
    .slideup_contentの内容は自由にどうぞ。
関連する記事

コメント & トラックバック
  1. […] Ri-mode Rainbow様のブログで「画像にマウスを乗せると下からスライドして出てくるのをCSSだけで設置」というのがあったので、勉強がてら僕もやってみました。 […]


  2. rigani

    .boxでラップしているなら

    .box:hover .slideup {
    top: 0;
    }

    これで画像hover時に動かせないでしょうか(実際には.boxのhover時ですが)
    もしくは隣接セレクタを用いて

    .box > img:hover + .slideup,
    .slideup:hover {
    top: 0;
    }

    文章構造を無視するなら、要素数ひとつだけでの実装もできなくはなさそうです
    冗長かと思いますが、思いついた手法は
    ・background-imageの1枚目に画像
    ・background-imageの2枚目にスライド背景(単色ならlinear-gradientで代用)
    ・スライド背景のbackground-positionを画像サイズ分下にずらす
    ・padding-topを画像大きさ分付ける
    ・box-sizing:border-box、overflow:hiddenで要素サイズを固定する
    ・transitionでpadding-topとbackground-positionをアニメーション

    全て試したわけではないので、間違ったことを言っていたらごめんなさい


    • Ri-mode

      riganiさん

      ありがとうございます。
      一番最初のは、先にコメントいただいた、masa5714さんと同じ方法ですね。
      私では思いつかなかったので、教えていただけて本当に嬉しいです。

      また、背景を2枚重ねた方法も目からうろこでした!
      すばらしいの一言です。

      どうしてもjQueryに頼ってしまいますが、CSSだけでも十分できることはあるのですよね!
      まだまだ勉強不足だと実感です。

      ソース近いうちに書き直します!


  3. masa5714

    初めまして!
    画像をhoverした時にコンテンツを表示したいとのことですが、可能だと思います。

    かなり雑ですが、サンプルを書いてみました。
    いかがでしょうか!?
    (なおブラウザチェック等は一切行っていません。)
    http://jsdo.it/Masato.Takahashi/OeCE


    • Ri-mode

      masa5714さん

      ありがとうございます。
      まさに私がやりたかったことでした。

      私では思いつかなかった方法なので、教えていただけて大変光栄です。

      近いうちソースを直してみようかと思います!


コメントをどうぞ

技術的なサポート、質問等にはお答えできない場合もございます。
また、現在更新頻度はかなり低めですので、返信できたとしてもかなり遅くなる場合があります。
ご理解くださいませ。


以下のHTMLタグが使えます。
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

*


おすすめの本
ネットで調べればなんとかなる!という時代ですが、良い本にめぐり合い、基礎をきっちり固めることで応用がきくテクニックを身に着けることができます。もっと上達したい人におすすめの本をいくつかご紹介します。
TO TOP