さぁ!検索しよう!

画像にマウスオーバーしたときにキャプションを出現させる方法です。

今回はキャプションの動きを2種類紹介します。

DEMO1

画像をマウスオーバーすると、画像の内側に影が浮かび上がると同時にキャプションが出現します。

HTML

<div class="thumbnail">
    <img src="http://tsukulog.net/wp-content/uploads/2014/03/OHT89_aoiikemidori500-1024x475.jpg">
    <div class="caption"><span>Blue Pond</span></div>
</div>

キャプションは<div class="thumbnail"></div>の中に定義しています。

CSS

.thumbnail {
    overflow: hidden;
    position: relative;
    margin: 0 auto;
    height: 400px;
    width: 600px;
}

.caption {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    opacity: 0;
    background-color: rgba(255, 155, 0, 0.2);
    box-shadow: inset 0 0 50px rgba(50, 30, 0, .6), inset 0 0 100px rgba(50, 30, 0, .3);
}

.caption span {
    position: absolute;
    bottom: 0;
    display: block;
    padding: 20px;
    text-align: left;
    font-family: 'Raleway', sans-serif;
    font-size: 28px;
    background-color: rgba(0, 0, 0, .5);
    color: #FFF;
    width: 100%;
}

.captionheight:100%;,width:100%で、.thumbnailいっぱいに広げています。

タイトルはサムネイルの下端に表示されるように、bottom:0;としています。

jQuery

$(function() {
    var $caption = $('.caption');
    $caption.mouseover(function() {
        $(this).stop().animate({
            opacity: 1
        }, 600);
    })
    .mouseout(function() {
        $(this).stop().animate({
            opacity: 0
        }, 600);
    });
});

mouseover

$captionをマウスオーバーすると、$captionがふわりと浮かび上がります。

$caption.mouseover(function() {
    $(this).stop().animate({
        opacity: 1
    }, 600);
})

mouseout

$captionをマウスアウトすると、$captionが静かに消滅します。

.mouseout(function() {
    $(this).stop().animate({
        opacity: 0
    }, 600);
});

1つ目のキャプション表現はここまでです。

DEMO2

1つ目との違いは、マウスオーバーするとキャプションが左から出現する点です。

HTML

HTMLは1つ目のものと全く同じです。

CSS

CSSは.caption span{}に以下の一行を追加するだけです。

left:-500px;

jQuery

$(function() {
    var $image = $('.thumbnail');
    var $caption = $('.caption span');
    var $shadow = $('.caption');

    $image.mouseover(function() {
        $shadow.stop().animate({
            opacity: 1

        }, {
            duration: 600,
            queue: false
        })
        $caption.stop().animate({
            left: 0,
            opacity: 1

        }, {
            duration: 600,
            queue: false
        });

    })
    $image.mouseout(function() {
        $shadow.stop().animate({
            opacity: 0

        }, {
            duration: 600,
            queue: false
        })
        $caption.stop().animate({
            left: '-500px',
            opacity: 0

        }, {
            duration: 600,
            queue: false
        });

    });
});

マウスオーバー・マウスアウト時に影とタイトルを順番に表示させるため、各animateメソッドの第二引数のオプション内でqueue:falseを指定しています。
queuetrueとすればanimateメソッドが同時に実行されます。


以上で、画像にマウスオーバーでキャプションを出現させる方法を終わります。

参考文献

jQuery の animate による同時多発アニメーション