画像にマウスホバーで非表示の要素をオーバーレイで表示するjQuery ContentHover Plugin

画像にマウスホバーさせると非表示にしている要素がオーバーレイするので、デザインパーツの多いサイトをスッキリ見やすくしたい場合など発想次第で色々活躍しそうなjQuery ContentHover Plugin。パラメーターも色々用意されています。

Example jQuery ContentHover Plugin

Code

CSS

.contenthover { padding:20px 20px 10px 20px; }
.contenthover, .contenthover h3, contenthover a { color:#fff; }
.contenthover h3, .contenthover p { margin:0 0 10px 0; line-height:1.4em; padding:0; }
.contenthover a.mybutton { display:block; float:left; padding:5px 10px; background:#3c9632; color:#fff; -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; }
.contenthover a.mybutton:hover { background:#34742d }

JS

$(function(){
$('#d1').contenthover({
overlay_background:'#000',
overlay_opacity:0.8
});
$('#d2').contenthover({
effect:'slide',
slide_speed:300,
overlay_background:'#000',
overlay_opacity:0.8
});
$('#d3').contenthover({
overlay_width:270,
overlay_height:180,
effect:'slide',
slide_direction:'right',
overlay_x_position:'right',
overlay_y_position:'center',
overlay_background:'#000',
overlay_opacity:0.8
});
$('#d4').contenthover({
overlay_background:'#333'
});
$('#d5').contenthover({
hover_class:'mybackground'
});
var counter=0;
$('#d6').contenthover({
overlay_background:'#000',
overlay_opacity:0.8,
effect:'slide',
slide_speed:500,
slide_direction:'left',
onshow:function(){
counter++;
$('<div>'+counter+'. Hover element shown</div>').prependTo($('#d6_log'));
},
onhide:function(){
counter++;
$('<div>'+counter+'. Hover element hidden</div>').prependTo($('#d6_log'));
}
});
});

html

<h3>Simple fade</h3>
<img id="d1" src="http://diglog.org/assets/images/test.jpg" width="300" height="240" />
<div class="contenthover">
<h3>Overylay タイトル1</h3>
<p>Overylay コンテンツ1</p>
<p><a href="#" class="mybutton">いいね</a></p>
</div>
<hr />
<h3>Slide effect with different speed</h3>
<img id="d2" src="http://diglog.org/assets/images/test.jpg" width="300" height="240" />
<div class="contenthover">
<h3>Overylay タイトル2</h3>
<p>Overylay コンテンツ2</p>
<p><a href="#" class="mybutton">いいね</a></p>
</div>
<hr />
<h3>Slide from different direction and a smaller overlay</h3>
<img id="d3" src="http://diglog.org/assets/images/test.jpg" width="300" height="240" />
<div class="contenthover">
<h3>Overylay タイトル3</h3>
<p>Overylay コンテンツ3</p>
<p><a href="#" class="mybutton">いいね</a></p>
</div>
<hr />
<h3>Hovering on a div instead of an image</h3>
<img id="d4" src="http://diglog.org/assets/images/test.jpg" width="300" height="240" />
<div class="contenthover">
<h3>Overylay タイトル4</h3>
<p>Overylay コンテンツ4</p>
<p><a href="#" class="mybutton">いいね</a></p>
</div>
<hr />
<h3>Using a transparent png for better opacity effect</h3>
<img id="d5" src="http://diglog.org/assets/images/test.jpg" width="300" height="240" />
<div class="contenthover">
<h3>Overylay タイトル5</h3>
<p>Overylay コンテンツ5</p>
<p><a href="#" class="mybutton">いいね</a></p>
</div>
<hr />
<h3>Using callbacks</h3>
<img id="d6" src="http://diglog.org/assets/images/test.jpg" width="300" height="240" />
<div class="contenthover">
<h3>Overylay タイトル6</h3>
<p>Overylay コンテンツ6</p>
<p><a href="#" class="mybutton">いいね</a></p>
</div>
<pre id="d6_log" style="height:60px; overflow:auto;"></pre>	
  • このエントリーをはてなブックマークに追加

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

three × 5 =