jquery で 画像にテキストを重ねてアニメーション

2014年10月12日更新 view: 1942 view
photoBy: http://web-pc.net/shop/wp-content/uploads/2012/09/jquery1.jpg
スポンサードリンク

画像をテキストに重ねて、画像をわかりやすくしよう。

画像に文字を入れるときは fireworks や photoshop を使ってますか?
時代も変わり、SEO対策としてもできれば画像にテキストとして入れておきたい所。
そんな素敵な方法をご紹介します。

サンプルは?

http://www.css-lecture.com/template/2009/0409/
これの マウスオーバー時に残りを表示 というのをやってみます。

CSS

<style type="text/css">
h3    {
    font-size:18px;
    margin:0 0 0 10px;
    padding:0;
    color:#FFF;
}
.boxgrid    {
    width: 450px;
    height: 300px;
    margin-bottom: 20px;
    overflow: hidden;
    position: relative;
    border: solid 1px #555;
}

.boxgrid img{
    position: absolute;
    top: 0;
    left: 0;
}
.boxgrid p{
    padding:0;
    margin:0 0 0 15px;
}
    
.boxcaption{
    float: left;
    position: absolute;
    background: #fff;
    height: 100px;
    width: 100%;
    opacity: .8;
    /* For IE 5-7 */
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
    /* For IE 8 */
    -MS-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
}

.caption .boxcaption {
    top: 265px;/* 少なければ少ないほど、下部のラインが見える */
    left: 0;
}
</style>

javascript

jquery を先に読み込んでおくこと。

<script type="text/javascript">

    $(function() {
        $('.boxgrid.caption').hover(function(){
            $(".cover", this).stop().animate({top:'220px',opacity:'1.0'},{queue:false,duration:160});
        }, function() {
            $(".cover", this).stop().animate({top:'265px',opacity:'0.8'},{queue:false,duration:160});
        });
    });
    
</script>

HTML

<div class="boxgrid caption">
    <a href="/works/add/"><img src="/app/webroot/img/html.png" /></a>
    <div class="cover boxcaption">
        <h3><a href="/log/javascript/035.html">テキスト作成を依頼</a></h3>
        <p>HTML5正式対応!<br />超有名SEOコーダーが監修したコードで抜群のSEO効果を。</p>
    </div>
</div>

お疲れサマでした。
たったこれだけで画像にカーソルを合わせると文字が出たり入ったりすんですね。

スポンサードリンク

関連記事

関連カテゴリ