Aspdotnet-Suresh

aspdotnet-suresh offers C#.net articles and tutorials,csharp dot net,asp.net articles and tutorials,VB.NET Articles,Gridview articles,code examples of asp.net 2.0 /3.5,AJAX,SQL Server Articles,examples of .net technologies

jQuery Display Text Over Image on Hover using Content Hover Plugin

Jun 7, 2016
Introduction

Here I will explain how to display text over image on hover using jQuery content hover plugin or Place text over image on hover using jQuery or show caption when hover on image using jQuery or how to display text over image with faded style using jQuery with example. To show text over image on hover we are using jQuery content hover plugin.

Description:
  
In previous articles I explained jQuery crop upload image with preview example, jQuery asynchronous upload multiple files example, jQuery social sharing plugins with examples, jQuery scrollbar plugins with example, jQuery chatting plugin examplejQuery Bouncing Menu Example and many articles relating to
jQuery, JavaScript, jQuery Pluginsasp.net. Now I will explain how to display text over image on hover using content hover plugin using jQuery content hover plugin with example

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.

Demo

Download Sample Code Attached





If you enjoyed this post, please support the blog below. It's FREE!

Get the latest Asp.net, C#.net, VB.NET, jQuery, Plugins & Code Snippets for FREE by subscribing to our Facebook, Twitter, RSS feed, or by email.

subscribe by rss Subscribe by RSS subscribe by email Subscribe by Email

0 comments :

Give your Valuable Comments

Note: Only a member of this blog may post a comment.

© 2015 Aspdotnet-Suresh.com. All Rights Reserved.
The content is copyrighted to Suresh Dasari and may not be reproduced on other websites without permission from the owner.