2015.07.11
jquery

【超シンプル】jQueryプラグインなしで画像ホバー時に下からコンテンツがスライドして出てくるようにする方法

画像ホバー時に下からコンテンツがスライドして出てくるようにする
画像の上にマウスを乗せたときに、下からにゅっとアニメーションでコンテンツが出てきたり、半透明の色がにゅっと出てきて画像の上に乗るようにする方法を紹介します。
写真を使用するポートフォリオや商品紹介、イメージギャラリーなどで使えるようなものです。

jQueryでプラグインなしで実装できます。

ソースはできるだけシンプルにしましたので、jQueryが苦手でも分かりやすいかと思います。
カスタマイズも簡単にできるかと思いますのでぜひぜひ試してみてください。

画像にマウスオーバーすると下からにゅっと出てくる

1. jQueryを読み込む

HTMLのhead内にjQuery本体を読み込むために以下の記述をします。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

2. HTMLソース

<div class="pic_box"><img src="画像のパス" />
<span>
<p><a href="飛ばしたいURL">See more &gt;&gt;</a></p>
</span>
</div>

サンプルでは上記を3つコピペして、画像のパス飛ばしたいURL部分をそれぞれ変更しています。

spanの中にお好きなコンテンツを入れることが可能です。
今回は分かりやすいようにspanにしましたが、divにしてCSSでクラスを割り当てる方がよいかもしれません。

3. CSSソース

.pic_box {
	width:250px;/*画像のwidth*/
	height:140px;/*画像のheight*/
	position:relative;
	overflow:hidden;
	margin:10px;
	float:left;
}
.pic_box span{
	width:100%;
	height:100%;
	background:rgba(239,0,151,0.6);/*にゅっとでてくる部分の色*/
	position:absolute;
	top:140px;/*画像のheight*/
	left:0;
}
.pic_box p {
	font-weight:bold;
	text-align:center;
	margin-top:70px;
		
}
.pic_box p a{
	color:#fff;
	text-decoration:none;
	border:1px solid #fff;
	padding:5px;

}
.pic_box p a:hover {
	background:#fff;
	color:rgba(239,0,151,1);
}

CSSの解説

  • 3行目と14行目
    今回はここの値は同じにします。14行目を3行目の値よりも小さくすると、画像の上にspanが表示されます。デザイン次第では調整してもよいですね。
  • 4行目と13行目
    spanをposition:absoluteにするので、その親要素の.pic_boxにrelativeを指定します。
  • 5行目
    はみでた部分を隠します。今回はspanは.pic_boxの下に表示されています。試しにこの行を消して確認してみると分かるかと思います。
  • 17行目以降
    17行目以降は自由に変更することでにゅっと出てくるコンテンツの中身をカスタマイズできます。

4. jQueryソース

下記のソースをbody内に記述します。

<script type="text/javascript">
$(function(){
       
        $('.pic_box').hover(function(){
                $('>span',this).animate({
					top:"0px"
					}, 500 );
                },function(){
                $('>span',this).animate({
					top:"140px"
					}, 500 );
                
        });
});
</script>

jQueryの解説

  • jQueryのhoverは使えるようになるととても便利です。CSS3でも色々できますが、jQueryが使えるようになるとできることの幅が広がります。

    .hover(function(){
                    //マウスオーバー時にしたいこと
                    },function(){
                    //マウスを離したときにしたいこと
            });
    

    上記がjQueryのhoverの基本です。マウスを乗せたときと、離したときで動きを指定できます。
    CSSではマウスを乗せたときのみしかアニメーションが指定できないので、jQueryのほうが一歩上ですね。

    今回のjQueryの記述ですが、文章で説明すると以下のようになります。

    .pic_boxhoverしたときに、
    >spananimatetop0pxに、500ミリ秒でして、
    hoverをはずしたときに、
    >spananimatetop140pxに、500ミリ秒でする

    ということです。ちょっとクドイですね……。

  • 5行目と9行目のthisは.pic_boxのことです。
Memo:

ちなみに私は「Web制作の現場で使うjQueryデザイン入門」という本で初めてjQueryを勉強するようになりました。

CSSとHTMLが分かる人にはお勧めの本です。
jQueryについての知識が身につき、コードが自分で書けるようになります。

関連する記事

コメントをどうぞ

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


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

*


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