jQuery Display Text Over Image on Hover using Content Hover Plugin

By: Suresh Dasari 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 example, jQuery Bouncing Menu Example and many articles relating to jQuery, JavaScript, jQuery Plugins, asp.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

<head>

<title>jQuery Show Text on Hover Image using ContentHover Plugin Examples</title>

$(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>

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>

<table>

<tr>

<td>

<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>

<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>

<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>

<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