To show text over image when hover on image using jQuery for that we need to write the code like as shown below
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>jQuery Show Text on Hover Image using ContentHover Plugin Examples</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script src="js/jquery.contenthover.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(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({
hover_class: 'mybackground'
});
})
</script>
<style type="text/css">
body{ font-family:Verdana; font-size:10pt}
.mybackground { background:url(Images/transparent_bg.png); }
.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 }
</style>
</head>
<body>
<form id="form1" runat="server">
<table>
<tr>
<td>
<img id="d1" src="Images/1.jpg" width="300" height="240" />
<div class="contenthover">
<h3>Aspdotnet-Suresh.Com</h3>
<p>It offers many articles relating to Asp.net, C#, SQL Server, Web Services, WCF, AJAX, XML, JavaScript, JQuery, Gridview articles.</p>
<p><a href="#" class="mybutton">Lorem ipsum</a></p>
</div>
</td>
<td>
<img id="d2" src="Images/2.jpg" width="300" height="240"/>
<div class="contenthover">
<h3>Aspdotnet-Suresh.Com</h3>
<p>It offers many articles relating to Asp.net, C#, SQL Server, Web Services, WCF, AJAX, XML, JavaScript, JQuery, Gridview articles.</p>
<p><a href="#" class="mybutton">Lorem ipsum</a></p>
</div>
</td>
</tr>
<tr>
<td>
<img id="d3" src="Images/2.jpg" width="300" height="240" />
<div class="contenthover">
<h3>Aspdotnet-Suresh.Com</h3>
<p>It offers many articles relating to Asp.net, C#, SQL Server, VB.NET, jQuery, JavaScript, XML, html, css. </p>
<p><a href="#" class="mybutton">Lorem ipsum</a></p>
</div>
</td>
<td>
<img id="d4" src="Images/1.jpg" width="300" height="240" />
<div class="contenthover">
<h3>Aspdotnet-Suresh.Com</h3>
<p>It offers many articles relating to Asp.net, C#, SQL Server, Web Services, WCF, AJAX, XML, JavaScript, JQuery, Gridview articles.</p>
<p><a href="#" class="mybutton">Lorem ipsum</a></p>
</div>
</td>
</tr>
</table>
</form>
</body>
</html>
|
If you observe above code I added some of script files in header section by using those files we can implement content hover functionality for required controls. If you want code files you can get from attached folder.
0 comments:
Post a Comment
Note: only a member of this blog may post a comment.