jQuery ContentHover Plugin

jQuery ContentHover Plugin

ContentHover is a small jQuery plugin that helps you show some hidden content on top of an element when the mouse hovers over it. There are options to chose how your hover effect would appear, like fade in or slide in from any direction, you can change the opacity of the overlay etc. (Check out the options below)


Lets assume you have an image and want to show some text on top of it when the mouse hover over it.

Add a div with class="contenthover" after the image:

<img class="myimage" src="image.jpg" width="300" height="240" />
<div class="contenthover" style="padding:20px">This would show on top of my image on mouseover.</div>

Then fire the plugin like this: (using the default options)


It doesn't always have to be an image and a div. It would work with any html element.

For demos check Examples & Usage.

Options reference

Here's the default options object with an explanation on every available option.

data_selector: '.contenthover', // The selector for the element that will be the content of the overlay element to show on hover 
width: 0,                       // Set to 0 to let the plugin figure it out
height: 0,                      // Set to 0 to let the plugin figure it out
overlay_width: 0,               // The overlay element's width. Set to 0 to use the same as 'width'
overlay_height: 0,              // The overlay element's height. Set to 0 to use the same as 'height'
overlay_x_position: 'center',   // [center, left, right] The position of the overlay horizontally (if overlay_width is different from width)
overlay_y_position: 'bottom',   // [center, top, bottom] The position of the overlay vertically (if overlay_width is different from width)
overlay_background: '',         // The css background of the overlay element
overlay_opacity: 1,             // [0-1] The opacity of the overlay element
effect: 'fade',                 // [fade, slide, show] The effect to use
fade_speed: 400,                // Effect ducation for the 'fade' effect only
slide_speed: 400,               // Effect ducation for the 'slide' effect only
slide_direction: 'bottom',      // [top, bottom, right, left] From which direction should the overlay apear, for the slide effect only
zindex: 2,                      // The base z-index value
wrapper_class: 'ch_wrapper',    // CSS class to add to the wrapper
normal_class: 'ch_normal',      // CSS class to add to the 'normal' element
hover_class: 'ch_hover',        // CSS class to add to the 'hover' element
onshow: function(){},           // Callback function when the 'hover' element is shown
onhide: function(){}            // Callback function when the 'hover' element is hidden


It has been tested on the latest versions of Firefox, Chrome, IE and Opera and seems to work well. It also works on IE7, 8 and 9. It does not make use of any CSS3 transitions and effects, so the result should be similar on most browsers.


  • Bug fixing
  • Add more effects

Feel free to comment or report any bug.


Tuscany Villas  •  January 19, 2012 11:02

Thanks for sharing information.

Ss  •  February 17, 2012 15:04

thanks great work on this!

just one issue, if you use cufon for the content in the hidden div, text that uses cufon does not show up.

any suggestions?



Nikos Tsaganos  •  February 21, 2012 20:56

Sorry I don't have any experience with cufon, I did a quick search on stackoverflow for similar problems though (cufon and visibility). Maybe firing your Cufon.replace functions before the ContentHover plugin, or Cufon.refresh(); inside the "onshow" callback would help.

BD Design  •  May 21, 2012 03:24

Great plugin! I have been searching for hours looking for an image overlay plugin that has multiple effects and does more than just an opacity fade - your plugin was exactly what I was looking for! Thank you much for sharing!

Here's an effect suggestion for any future updates you might release. Have an option where the background slides in from a different direction than the content layer - for example the background slides from top to center and the content slides from bottom to center. The only example I could find is the wild is the second example ('Theme Two') from this plugin on ThemeForest: http://tinyurl.com/7oofkcg

Thanks again!

Daniel Watson  •  June 7, 2012 13:49

I would much appreciate a more in depth article on AJAX as this is the only area on jQuery I’m unsure on.

Thank you for the article

Qasim  •  July 27, 2012 21:14

Hi, great work and thanks for sharing!

I'm having trouble implementing this in Wordpress. It's usually pretty simple with other jQuery plugins I've used.

I've copied the HTML code into a new page, loaded up the js file. I already have the jQuery library loaded in my site, and copied in the jQuery for the simple fade. Nothing. It's just the image that shows. Google Chrome shows no errors.

I have to say I'm not a pro at this, so am I doing something wrong?

Thanks so much.

henry  •  August 9, 2012 02:34

how can I use multiple images with the same id or class

Pat  •  August 9, 2012 22:18

Same question as zee and henry for me - I have three images I want to use the same effect for all of them.

Pat  •  August 9, 2012 22:23

Worked it out - in the head section under $(function(){

copy the style you want and give it another name - $('#d7') , $('#d8') etc

henry  •  August 13, 2012 11:48

Hi Pat,
Thanks for your reply but I am generating a dynamic images from the database using the url so I think it will be better to use a simple class or Id name to wrapper many photos together just like in gallery so all of them will have same effect.

Looking forward to read from you.

Once again thanks so much

henry  •  August 14, 2012 15:40

hi Pat,

If you have a solution to my question as it regards my project requirement, please kindly let me know because I am struggling with that issue with your plugin and it is delaying my project.

Thanks so much

tiffany  •  August 20, 2012 09:35

Thanks so much for this!

However, I'm coming across one issue – the image to be swapped on my page doesn't display on page load and only appears when the page is refreshed.

Do you have any ideas for how to fix this?

Thanks in advance!

tiffany  •  August 21, 2012 08:26

Never mind, I figured it out! I hadn't added the width and height to the image tag, I added these and it works now.

Michael Caputo  •  August 21, 2012 18:21

Would be really great if this was responsive!

Marta Johnsson  •  September 12, 2012 02:17

I have the same problem as Michael Caputo; I need it to be responsive; are you going to implement that? I love the plugin very much but can not use if it is not responsive:-(

julieth  •  September 17, 2012 13:20

estos contenidos estan muy cheveres pero dejenlos descargar cada uno con su ejemplito por uqe solo el jquery , no me funciono ninguno

Ben  •  October 12, 2012 06:17

I can not seem to get a series of these elements to appear inline. Is there a way to do this? Adding #d1 {display:inline} only breaks the code

Haitham  •  October 12, 2012 08:05

I love this plugin.. but was wondering if anyone got it to work in a responsive design.
or if you know an alternative to this that's responsive.

J3.14R  •  November 5, 2012 23:54

Also quite interested in responsiveness of this.

enki  •  November 8, 2012 17:15

Thanks a lot for this wonderful script. But i have a problem.
I have two div/boxes inside a container.
I want to apply the contenthover script to the first box but when i do that the second box on the right goes down on the left and dont stay on the same level on the right :(

The padding is 0, but impossible to have the 2 boxes at the same leve. Any idea? (sorry if my english is not perfect)

Manni  •  November 9, 2012 15:56

To get the same effect to work on a number of images on the same page, change id to class (so change #d1 to .d1)

mike  •  November 16, 2012 04:18

great script - I would like to show a magnifying glass image on top then on mouse over have that go away to show the hover div. is that possible and could you provide an example? thanks

amrabdelaziz  •  November 17, 2012 14:31

amazing plugin :D

Barbara  •  December 3, 2012 23:15

I'm trying to apply this in an ecommerce situation, and it's over riding my float on the div element so that I'm losing the product layout. How can I get it to not over ride this?

Alex  •  December 4, 2012 20:05

Hi there,
thanks for this nice plugin.

One thing i have problems with is that when i hit refresh in Safari and Chrome and Ctrl+Shift R in Firefox, the site reloads an the images disapeared. Another refresh does not get them back. If i navigate through a link or the addressfield to the site, it works fine.

Any ideas?
best regards

Wyneth  •  December 10, 2012 12:44

I too am having the same issue while using this plugin for my site. On hitting refresh in Chrome, the images disappear and and all the content is collapsing. I have mentioned the height and width for the images but they are not reflecting neither is the overlay_width or height through js. Could you please give me any suggestions ?

Andrew  •  December 15, 2012 13:53

In reply to Barbara's question 3 Dec: To hack the issue of losing the css styling of the div to be hovered over (specifically float: left), use:

$(".ch_element").css("float", "left").css("marginLeft", "20px").css("marginTop", "20px");

(or whatever styling you want to apply)

Other than that, the plug in is great - credit and thanks to Nikos for taking the time to provide this to us all.

Rob  •  December 25, 2012 19:18

I have been trying to find the jQuery ContentHover Plugin #1. Simple fade for months, thank you so much for creating a wonderful piece of code, I'm a newbie to jQuery , when I copy and paste the HTML and CSS, JS, it works great but src="1.jpg" duplicates itself under the original image, they are stacked, the top image works great, the one underneath does nothing.
Any help would be greatly appreciated, Thanx R

Barbara  •  December 28, 2012 20:45

I'm doing cross browser testing, and of course IE8 is giving me grief :-)

I'm using a png for the overlay as shown in one of the demos. In IE8, there is this flash of solid black before the overlay image png kicks in. Of course, it doesn't happen in any other browser.

Any idea how I can work around this

matt  •  January 6, 2013 06:36

Hey all this seems like an awesome plugin but for some reason when I use it, the image its applied on disappears, I know its working as there are no errors but cant figure out why it does this?

matt  •  January 6, 2013 06:36

EDIT: Found out it does not work in CHROME

Karanvir Kang  •  January 15, 2013 17:41


Can you please tell me the licensing details of this plugin ?

Jaume Juan  •  January 28, 2013 14:42

This plugin is exactly what I need.

I'e a problem, I have several images in one div and the plugin only works in the first. I can't find the solution. Anybody knows what is the problem?


Jeff Paulson  •  January 31, 2013 11:49

I am curious if there is a way of making the images as links? when I add an href it makes the jquery not work. anyone know how to fix this?

Carlos Barrionuevo  •  February 6, 2013 01:22

My problem is that it works great in IE 8-9, fine in Firefox but not in Safari and Chrome support any load

santosh  •  February 14, 2013 08:00

Does this plugin come under any license? is it MIT or GPL license?

Richy  •  March 7, 2013 19:32

In the same boat. does not work in Chrome or Safari

Daniel Mariluz  •  March 15, 2013 23:05

If the images are not displayed after installing the plugin, defining the height and width of the image in the CSS, this will also help to define sizes when working with responsive design.

If you want to apply the same effect to several images, it defines a class instead of an ID so that it can be repetitive.

Greetings from Peru

Mika Douglas  •  April 4, 2013 03:26

This is exactly what I have been looking for.

I am a novice but I think I can handle the css and the html.
I have never added a plugin short of the automated way. How and where do I add the javascript?


John Bustamante  •  April 22, 2013 04:19

No funciona en Chrome :(

romane  •  May 1, 2013 19:34

how would you make 4 boxes that are 240px wide line up next to each other where the left edge on the far left box aligns all the way to the left and the right box aligns all the way to the right? The width they are aligning is 100px with a 10px space in between them.

romane  •  May 1, 2013 19:36

- Mika - you add the javascript in between the tag.

Carlos Barrionuevo  •  May 20, 2013 19:01

Fixed bug in google chrome, plugin change the width 0 and height 0 to the size of the box

MikeB  •  June 13, 2013 16:57

Is it possible for for part of a text box to remain visible, with the remainder of the box sliding into view upon mouseover? I would like to create a group of images with a headline overlaid onto each one, and on mouse over, the headline slides up to reveal more text and a link.

Caron R  •  July 3, 2013 20:45

To: Andrew , who posted on: December 15, 2012 13:53

Hope you find this, just a thanks for your fix!!! It helped me too.

karen  •  July 16, 2013 16:41

Had same problems as others with no image appearing in a set of list items, despite the image tag having a height and width -- display:none was being added to my img tag by the plugin, I suppose... Kudos to the commenter who suggested putting the height and width in the css as well, I added display:block and a height and width to my li img and the li a (wrapping the image), and all displays.

Jennifer  •  October 29, 2013 11:00


Is there any licence with this, like MIT? Can it be used for commercial purposes, or only for personal? Thanks! It seems to do just what I wanted for designing portfolios.

Andrew  •  November 5, 2013 20:23

I'm currently trying to apply ContentHover to a BLOCK link and have the hover element display below the link - kind of like a dropdown.

It seems I'm currently having some display issues - could someone please enlighten me as to why when the link is hovered the ContentHover doesn't activate, but instead is displayed somewhat below.

See Example http://webbetasite.com/carp/home.html .

Thanks for your help in advance.

Boris Popov  •  February 6, 2014 23:23

Thanks for your sharing information. This is exactly what I wanted. Please keep upgrading your information.

طراحی سایت در اصفهان  •  April 10, 2014 08:05

really good
if is posible send me related article like this .
tanks a lot

rajneesh dwivedi  •  May 11, 2014 19:43

I am trying to implement this script in php while loop where I am retrieving my images and corresponding content of div from mysql database .

Script works well for one time in a loop but the rest part of loop it doesn't work.

Can anyone help me

طراحی سایت در مشهد  •  May 13, 2014 21:59

tnx a lot . so goood. this site is very effective for me.

طراحی سایت در مشهد  •  May 13, 2014 22:08

tnx a lot. i like your website

جرثقیل سقفی  •  May 30, 2014 17:44

could u give me some same article?

Doc Scan  •  June 22, 2014 16:38

Cool, i like this site.. Postings are always beneficial.

Cargo Carrier Info  •  June 22, 2014 16:39

Great post, i love it..

Gatut  •  June 22, 2014 16:42

I am still not familiar with php, but this article opened my horizons to be a little more out. Thank you admin..

boneka sex  •  June 24, 2014 11:49

thanks for sharing article post like this.

هتل درویشی  •  July 1, 2014 13:26

بسیار عالی ممنون

سانترال  •  July 2, 2014 16:35

tnak you so much

هتل درویشی  •  July 5, 2014 17:18

ممنونم عالی بود

alat bantu sex  •  July 5, 2014 19:33

thanks the information made ??.......me inspired again spirit by alat sex pria, obat kuat pria, vimax canada, alat sex pria, obat sipilis, obat pelangsing, boneka full body, alat bantu sex, alat bantu sex

obat pembesar penis  •  July 5, 2014 19:38

good is my blog shering article and information

Post your comment

(optional, will not be shown)
NOTE: Any links will have rel="nofollow"