http://www.backslash.gr/demos/contenthover-jquery-plugin/
me site eke 2 weniyata thiyena HOVER eka dana heti mata poddak kiyanawada
me site eke 2 weniyata thiyena HOVER eka dana heti mata poddak kiyanawada
Latest ads
-
Power Lifting Lever Belt- SkullVamp
- Updated:
-
port.lk Domain for sale
- Lankan-Tech
- Updated:
-
Colombo Kaduwela - Two Storey House for Sale- dilrasan
- Updated:
-
Wechat qr verification
- Pawan2005
- Updated:
-
🚀 GOOGLE AI PRO 18 MONTHS ACTIVATION 🚀- sayuru bandara
- Updated:
Jquery help
- Thread starter 2020isuru
- Start date
meke example eke ma deela thiyenne karanna ona widiya.ehama beri nam Download source walin file eka DL karala eke thiyena widiya balanna.
http://www.backslash.gr/demos/contenthover-jquery-plugin/jquery.contenthover.js
http://www.backslash.gr/demos/contenthover-jquery-plugin/jquery.contenthover.js
Code:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery ContentHover Plugin - Backslash</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
<script src="http://www.backslash.gr/demos/contenthover-jquery-plugin/jquery.contenthover.js"></script>
<script>
$(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'));
}
});
});
</script>
<style>
.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 }
.mybackground { background:url(transparent_bg.png); }
</style>
</head>
<body>
<img src="1.jpg" name="d2" width="300" height="240" id="d2" />
<div class="contenthover">
<h3>Lorem ipsum dolor</h3>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum pulvinar ante quis augue lobortis volutpat. </p>
<p><a href="#" class="mybutton">Lorem ipsum</a></p>
</div>
</body>
</html>
HTML:
<style type='text/css'>
.contenthover {
width:300;
height:240;
background-color:rgba(0,0,0,0.5);
position:absolute;
left:0px;
top:0px;
display:none;
}
#d1{
position:absolute;
left:0px;
top:0px;
}
#d1:hover+ .contenthover{
display:block;
}
</style>
</head>
<img id="d1" src="birthday_dog.jpg" width="300" height="240" />
<div class="contenthover">
<h3>Lorem ipsum dolor</h3>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum pulvinar ante quis augue lobortis volutpat. </p>
<p><a href="#" class="mybutton">Lorem ipsum</a></p>
</div>
<body>
</body>
</html>
