Discussion on HoverUp - jQuery Plugin

Discussion on HoverUp - jQuery Plugin

Cart 179 sales

GeertDD supports this item


This author's response time can be up to 10 business days.

25 comments found.

Does this work with responsive layouts

Not really, I’m afraid.


Is it possible to have an effect like in this page (the three images in the carousel): ..if you see there is first displayed the title, then on hover it appears the description. I didn’t see this feature in the demo.

Good question, however, this is not a built-in feature. The caption is positioned just below or above the image, so it does get hidden completely. You could go tweak the script if you like. Thanks.


Nice little script. Before buying, is it possible to display a title, then hover to display the full content/description?

That is, display the top lip, then the full box on mouseover.

I’m not exactly sure what effect you have in mind but if you like at the demos, you should get a good idea of the possibilities. Of course, you can dive into the code and make some tweaks to your likings, if you want to. In that case JavaScript/jQuery skills are required.

Hi, Really love your plugin and just questioning if it work with an additional lightbox effect. Looks like I can include the “rel” in the href. Just wanted your POV . Thanks!

Hi. Yes, adding a lightbox link to a box with a hoverup effect should cause no problems.

Thanks for the reply. Well pretty basic really. Right now the first row (block) in your demo has three images and all of them are 400px X 250px.

Will this work if they were different aspect ratios in that first row (block). Say three images but the first is 400px X 250px the next is 300px X 200px and the last is 275px X 275px.

Does that make sense? When I use firebug to adjust I am getting mixed results but I also know that the script has already fired.

Okay, I think what you’re asking is not specifically related to this plugin, but just to the layout of your page. The demo blocks get floated left. If your blocks have different heights, they may not be floated next to each other the way you want. A jQuery plugin like Masonry could help you out with that.

HoverUp has no problems adjusting to different block sizes. The very last HTML block in the demos has a different size, for example. I hope I answered your question well enough.

Am I correct in assuming that this won’t work with variable height and width images in the same block? I would like to use this in a CMS and the user will be uploading their own images and all will invariably have mixed aspect ratios. Thanks!

Well, it works on content with different widths and heights, of course. I’m just not sure what you mean with “in the same block”.

Nice script (:

Is source code included? So I can have all my scripts in a single script.

Yes, source code is included. :-)

i am thinking i am OVER thinking the issue. i ran some tests and things work very nicely.

Thank you VERY much GeertDD. I appreciate you’re active enrollment with helping me.

Cheers! ::clinking a ‘Rodenbach’::

You are welcome. :-)

sorry, bad bad sentence

original: “so in order to override this native 250px, must i assign and inline style to the div that wraps around the image?”

edit: so in order to override this native 250px, must i assign an inline style height value to the div wrapping around the image?


You can do that, I guess. Did you try it already? :-)

line 58: “The box needs to have an explicit height, otherwise when the content’s position is shifted,”

so in order to override this native 250px, must i assign and inline style to the div that wraps around the image?

My image heights vary.

Hello, great product.


in the demo file, where is the being pulled from? I see the following using firebug:

style=”position: relative; overflow: hidden; height: 250px;

most specifically, i’m wondering where the height assignment of 250px is being pulled from.



It’s the native height of the box. The outer box needs to have this explicit height so its size doesn’t change while the content inside is shifted. Check out the non-minified jquery.hoverup.js file for extra info in the comments (line 58-61).

Sorry one mistake. Didn’t work out well in FF

So you only have to do the following change

// Show caption
var animateIn = function() {
$, o.speedIn, o.easingIn);

Thanks, ceasar. You could also set a ”.js” class to the html or body element and then apply CSS styling for other elements only when javascript is enabled. The trick is to add that ”.js” class very quickly. See:

Okay found it :-) first set ul#portfolio p { display:none; margin:20px; } to display none

Then in your script add the following .show() add the end of the string

var animateIn = function() {
$caption.stop(true).animate(captionIn, o.speedIn, o.easingIn).show();

if (o.shiftContent) {
$content.stop(true).animate(contentIn, o.speedIn, o.easingIn).show();

The same goes for the Hide caption

Hai, thanks for the script. Works perfectly. However I have one problem. When refreshing the page (shift F5, also in your demo) I see the captions before the picture in all browsers This is because the js comes later and then set // Hide the caption when it’s outside $box.css(‘overflow’, ‘hidden’);

But I think this also can be set in the css so this won’t happen. any idea where to set this in the css ?


I just purchased this file, and when i installed it on my site. On the pages that have the effect the page loads, and the screen is a transparent black. But when i click on the page it goes away. So i know it’s the script.

It almost acts as if your screen goes to sleep and then wakes up once the mouse is moved. I removed the Google script to make it point to my server but it’s still doing the same thing.

Please help.

Hard to tell what is going wrong. Could you contact me via my email contact form and then provide the URL of your page? I’ll have a look. Thanks, and sorry for the problems.

I just purchased this item and am trying to integrate with jquery colorbox. When I click the “View Gallery” the image gets pushed to the top and doesn’t reset unless refreshed:

Please give me any assistance possible.

This appears to be a weird problem between the combination of hoverup and colorbox. I shared my findings via email.

I just want to confirm the author’s responsiveness. He was looking at this for over an hour and has been VERY prompt in email reply’s. He has built a GREAT product. I think it is more of an issue with colorbox.

this is very handy, demos look great!.. well done :)

Thanks all! :-)

thats great i like it :) thanks

Nevermind, people can still go into the source code to find the imagelink, so my idea was a moot point… the script does what it’s supposed to and does it well.

I just purchased the script, is there someway to add a class to make the caption not go away? or perhaps a future feature?

I want to use it as a overlay copyright watermark.

Last Example on your Demo Page: ©2010 Photo by John Doe -> © 2010

I want it to stay there regardless if I hover or not.

Yes I’m aware of that people can click View Image to get it without the “watermark”. I’ll have to see if I can come up with a fix for that.

Perhaps a script that replaces the image with a “this requires javascript picture” if javascript is disabled.

Let’s see. If you just want to add a static caption, all you need is CSS . Just don’t attach the HoverUp plugin to it. The “javascript required” problem automatically goes away then too, right?


Tell us what you think!

We'd like to ask you a few questions to help improve CodeCanyon.

Sure, take me to the survey