Jump to content


This topic is now archived and is closed to further replies.


HOVER - how can I use more than 9 boxes at once?

Recommended Posts


Hey James,


Love Hover, it's perfect for my business site but just wondering how I can use more than 9 boxes at once? See how it seems not to format correctly when I add 10 or more...




Also like to know the recommended size for background images too :) I've been going for 500x500... is it possible to set the image to center rather than top align do you think? Or is that dependent on each boxes hover-over style?






edit - fyi I don't have your theme, just using the standalone Hover product uploaded to DMS2...

Share this post

Link to post
Share on other sites

Argh I figured it out, I'd used the wrong PS template for a few of the images so they were a different size. Opps!


Not to worry :)

Share this post

Link to post
Share on other sites

  • Similar Content

    • Claude203
      By Claude203
      I'm using Hover and would like to know how to disable it for mobile devices. This below is what I am using (with custom styling class "hover-box") but the Hover section still appears. Thank you.
      @media only screen and (max-device-width: 700px) {
      .hover-box { display: none; }
    • kwp4petar
      By kwp4petar
      Hi, i'm trying to get the hover background to be completely transparent.  The closest i've gotten so far is using a 75% opacity grey box I made in photoshop and set that as a background-image:
      .jgHover figure {
        background-image: url("...");
      but that only changed one of the hover 'tiles', and even then the transparency revealed a blue (and now grey) box behind it.  
      My goal here is to have a 100% transparent box with a 2px white outline and the header showing, and that's it.  Then it behaves like normal with showing the content.
      Another question I have is: How do I know what a good image size is to use for this section?

      On your site you have a beautiful 3x3 layout of your staff with no spacing in between what so ever, each having a unique animation. How was that accomplished? Was special padding customizations used?
      Also, when I played with the animations on first installing the section, I noticed that the image gets a grey 'overcast'(?) over it.  Here's an image below using the Niall animation on the far left, while the other two remain as Charlie:

      (side question: what is the default size image being used here?)
    • mooihoek
      By mooihoek
      I seem to be having some issues replicating the NAVBAR using the Corporation theme, I've imported the content but I just can't get the same effect at http://corporation.jamesgiroux.co/, when you select the buttoms at the top they are highlighted by a colour under the text
      My website is http://tiny.cc/4j5ndx
      Any ideas whats going on here?
    • mooihoek
      By mooihoek
      I'm trying to remove the default text when using iboxes, does anyone know how this can be done?
      Website is http://tinyurl.com/knxoves  iboxes on the home page contain the default text " Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean id lectus sem. Cras consequat lorem."
      I want to remove this text and have no text
    • Stephen
      By Stephen
      Hi James, 
      I'm attempting to add three bottom-borders at the bottom of the nav bar and I need them to be in the following order:
      1) yellow
      2) black
      3) green
      I've been successful with two - the yellow and the black border. 
      I've identified two selectors and successfully added the following: 
      // THE BLACK BORDER IS HERE //   .section-navbar { border-bottom: 8px solid black !important;   }  
      // THE YELLOW BORDER IS HERE //   .navbar{ border-bottom: 12px solid rgb(255, 243, 0) !important;  }   I'm having trouble with the third. I'm using firefox and I've found a class called "pl-fixed-top." See the div below. I can modify this in Firefox, by just adding a bottom-border property and it works.   <div id="fixed-top" class="pl-fixed-top" data-region="fixed-top"   However, it doesn't work in the custom area of the theme and I can't find the class anywhere in the Less style sheet for both the nav section and the theme. Any ideas?    Tried to send a screen shot, but I'm limited to 2.21kb.