• かちびと.net

    画像やボックス要素にhoverするとエフェクト付きで別のボックス要素を表示するjQueryプラグイン・ContentHoverのご紹介です。なんか久々な感じですね。

    Kudos for

    WordPress jQuery
  • About This

    Web制作に役立つTips、チュートリアル、、マーケティングに役立つ情報などのリソースをほぼ毎日配信しています。宜しければメモ代わりにご利用下さい。詳しい情報はAbout me またはhumans.txtをご覧下さい。

    Kachibito.net is a community-based website for web designers and developers. The site includes a popular weblog, a design gallery, a open source software, design tips, and the various web-news.

  • Links

画像やボックス要素にhoverするとエフェクト付きで別のボックス要素を表示するjQueryプラグイン・ContentHover

スポンサーリンク

画像やボックス要素にマウスホバーすると
別のボックス要素をフェードエフェクトや
スライドアニメーションで表示させる事が
出来るjQueryプラグインです。昔は色々と
これ系を見かけましたけど最近は全然無い
ですね。

これくらいなら自作する、という方も多いのか、以前はかなり見かけたホバーエフェクトのjQueryプラグインは全然見かけなくなりましたが、プラグインの方が楽な場合も多々あると思いますのでこういうのも覚えておくと工数を減らせるかもしれません。

ContentHover


ボックス要素が画像の上にオーバーレイ込みで表示されます。マウスを乗せたらRead more、みたいなのも容易に出来ますね。


divの上にdiv的な事も出来ます。


IEでも問題ないです。


簡単に実装出来ました。

コード

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'></script>
<script src="jquery.contenthover.js"></script>
 <script type="text/javascript">
$('#d1').contenthover({
    overlay_background:'#000',//オーバーレイの色
    overlay_opacity:0.8 //透過処理
});
</script>

本体とプラグイン読み込んでオプション設定します。

いろいろ細かく設定出来るみたいなのでリンク先でご確認下さい。

<img id="d1" src="1.jpg" width="300" height="240" />
<div class="contenthover">
    <h3>title</h3>
    <p>contents</p>
    <p><a href="#" class="mybutton">link</a></p>
</div>

マークアップも単純。

これ系は以前はかなり見かけましたけど、最近めっきりでした。後発のプラグインはなにかと便利になっているので、こういうのもたまにはいいかもですねー。以下よりどうぞ。

ContentHover

URL :
TRB :

Comments & Trackbacks (2)

Twitter

Web制作に役立つそうなリソースを独断と好みで配信しています。

かちびと.netにリンクの無いトラックバックはお受けいていません。
コメントされる前にガイドラインをご覧下さい。

twitter facebook rss contact

Ads

Posts

Contact

Services