Crusader12 supports this item


376 comments found.


On your demo page, the first image in the 3rd block of images – fades the screen white and slides in a heading and some text:

I have a gallery of images that when clicking on an image I’d like the whole screen to fade to the image clicked (instead of white screen as in your demo) and slide in the heading and text same as in your demo.

1) Is this possible with this plugin?

2) Will this plugin work if I already have other formatting applied to the div – as in a isotope filtering?

Yes, HoverAlls can do this. Isotope or other filtering shouldn’t be a problem – worst case scenario with HoverAlls is assigning isotope to different containers to get it to work right. However, the way HoverAlls handles configuration you would definitely be better off with Boxaroo – Adaptive Lightbox – for lightboxes. You can pretty much create any type of lightbox scenario you can imagine with that plugin.

Thx for the response.

What I have is this: (gallery with isotope filtering)

I want this to be unaffected, and only when they click on one of the images does your plugin take over, am I correct.

I’m not sure your other plugin is great not sure which to use now :) Great plugin quality btw. I might get both – as long as you can help me with implementation?

Thanks :) Boxaroo use the exact same HTML structure as almost every other lightbox plugin. All of the special HTML/CSS, etc is done in an isolated #boxaroo container that is placed at the very start of your page, then positioned, etc – so it will not cause any problems with filtering, gallery, effects, plugins, etc. These plugins will still be able to search the DOM and locate your gallery elements as they do now. Since it is a lightbox, all of this was definitely taken into consideration during the build. HoverAlls is a different story. It takes 3 simple containers and re-arranges them in a bunch of different ways behind the scenes. This is how all of the effects are achieved using the same HTML – so people don’t have to stop and fiddle with “now how do I create a tooltip? a sliding panel?” etc etc. Its all the same. :) The strengths of HoverAlls is the flexibility, ease of use, and size. The strength of Boxaroo is it can pretty much look like any lightbox you want. More than that, it brings a lot of features to the lightbox that (unless some copycats have popped up) are still new and unique to only Boxaroo (animated gradient reflections that match lightbox transformations, multiple html elements for injecting additional HTML code/interaction, animated matte effects, etc, etc) – so you can get crazy if you want to. :) And I do provide support for all items. Hopefully this has answered you question, if you have any others – please let me know and I’ll do my best to answer them as soon as possible. Thanks!

Thank you :)

I posted a question in Item Support but do not get an answerso I will posit it here? We want to open a hoerall div from inside another hoveralldiv but it does not seem to work with dynamic content. Example is here click Residential to see div 1 and then click “Click Here For More Info”, the resulting page is what we need to have in a new hoverall div. Can this be done?

Hi, I believe I responded to your email a couple of days ago? Unfortunately this is not currently possible.

I really like, it very clean and professional.

Hello Crusader12,

I did not understand what is happening, but all messages exchanged yesterday are gone from here.

I agreed to remove the claim that I had done on the basis of your commitment to send-me examples that I requested you.

So far not received your support and my messages are gone.

Can you explain me?


You’re welcome :)

Hello Crusader 12, I believe that the example you sent me is incomplete. I can not do it. Can please review? PS .: In what time zone are you in? I ask to know the best time to send messages. Grateful.

You need to paste the example into the provided HoverAlls examples folder. It has been tested and works 100% for what you’re looking for.

Just purchased. Need instructions for using with Wordpress please – is there a step by step guide or anything? Not finding content provided very easy to follow.

Hi there, this isn’t a WP plugin, but I do provide a WP installer in the download since many people wish to use it with WordPress. After you use the installer, usage is exactly the same and covered in the docs. You will need to handle everything using HTML. If you need assistance creating a specific effect, please feel free to contact me directly through my profile page. Thanks!

i tried to install into an existing html5 site from pixelarity, however, the css class does not get called. i Inspected the

element to see what css was applied, but it only defaulted to the parent div class settings.

i just purchased this and would like to know how to get this going.

Hi there, in order to help you I will need a little more information. Please feel free to contact me directly through my profile page. Thanks!

I added this Hoverall effect to my web page and while it looks fine on desktop for some reason on mobile devices the text captions look blurry and aren’t triggering on tap. I sent an email with a link to my site.

Hi, sorry for the delay, I’m looking into this and will respond to your email as soon as possible. Thanks!

Funniest demo I’ve every seen here ! Nice job

Thanks :D

Is this responsive?

.... sorry just readed it, bought!

Yes, but parts of the plugin do rely on your adding your own CSS for styling so you should be familiar with how to write some responsive CSS. The plugin itself is configured to be fully responsive.

How to build responsive ?

Hi Durongkorn, all HoverAlls effects use percentages internally and the classes that you assign to them. So, just change the CSS for those applied styles in your template/theme’s media queries.


Can you tell me: how do I get the caption link in the rel= attribute to open in the same window rather than a new tab?


Yep, check out the docs under HTML Setup / Links and Text and you’ll see the link_control setting. You can also opt to not use rel for captions and inject your own HTML as a caption – then control whatever you want inside that HTML.

Hello used the contact form this did not get response

Uncaught TypeError: $ is not a function at /index.php:31:4 at dispatch (/lib/jquery-1.11.1.min.js:3:8436) at r.handle (/lib/jquery-1.11.1.min.js:3:5139)


<script type="text/javascript" src="lib/jquery-1.11.1.min.js"></script>
<link rel="stylesheet" href="lib/jquery-HoverAlls-2.6.min.css" type="text/css" media="all" />
<script type="text/javascript" src="lib/jquery.HoverAlls-2.6.min.js"></script>
    <!- HoverAlls Function Calls ->
<script type="text/javascript">
jQuery( window ).load(function( $ ) {
  // Code that uses jQuery's $ can follow here.
    "mode" : "tooltip",
    "opacity" : "0,1",
    "bg_class" : "tooltipBackground",
    "text_class" : "tooltipText" 
<img src=”img/accredit/Untitled-1.png” class=”HoverAlls_Tooltip” alt=”Woah. This looks pretty cool, but I’m still watching out for that cat.” rel=”” style=”max-width:100%;” data-hoveralls=”{ "coords":"0,50||85,-10||0,50", "text_coords":"100,0||-1000,0||100,0", "text_speed":"300,250", "text_effect":"linear,linear", "bg_class":"tooltipBackground3", "text_class":"tooltipText3", "ticker_count":3, "text_speed":"15000,250" }” />

Can you advise?

Hi, you do not need to use no conflict since the plugin is written properly. This is usually an issue with linking the files incorreclty. If you can provide a link in an email to me I can verify this is the problem. Thanks!

Will this work on wordpress? Im really interested in this.

Hi there, yes it has been used in quite a few WP themes now, but you will still need to know how to implement/edit basic HTML and CSS. This is a JS plugin and there isn’t a WP interface to it. Thanks!

I feel like this should be very simple, I want my caption to show at the bottom of the image before the hover event and then come back to bottom of the image after the hover event. How would I achieve this.

Hey Zach – no worries – to do something like this (for example, as a caption) you would use the “coords” setting. This setting controls the start, end and return coordinates of the Background Container (the blue box in the caption examples)

So, to start at (for example, 85% from the top of the thumbnail) 0, 85

and animate completely out of view: 0,100

and then return to the original position 0,85

you’d use: “coords” : “0,85 || 0,100 || 0,85”

Hopefully this helps? The Movement section in the docs goes into more detail, but let me know if you’re still having issues. Thanks!


kczilla Purchased

How can I used mode: panel and have it triggered on hover instead of onclick?


kczilla Purchased

ok – on_click:false works with mode:panel on_click:false does NOT work with lightbox

My goal is this: when user hovers over image I want the image to be enlarged like the lightbox effect in lightboxText1.

Please provide the method to do this, thanks

Also, for how do I dynamically setup the jquery to take the src of the element of class ”.englarge-me” and then apply the hover-alls plugin by using the img.src in ’.enlarge-me’

Late here, but I can check this tomorrow :)