Jump to content


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


Hover Section Transparent Background

Recommended Posts


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

Share this post

Link to post
Share on other sites

Did you ever find out any of the answers you were looking for and/or did you ever get any support on this? I just got the hover section and I'm looking for some of those answers myself. Thanks.

Share this post

Link to post
Share on other sites

  • Similar Content

    • tkpagelines
      By tkpagelines+
      Hi there ,
      i would like to change the color of menu items on hover and the current menu item. Both should have the same color, but not the color given of the theme scheme.
      Any suggestions ? Maybe a css snippet ?
    • nandorj78
      By nandorj78+
      I'd like to request a section (or that this could be enabled on the background settings of the existing sections) in which we could set a image to stay fixed, just as we can see in the link below:
      http://www.bootply.com/render/100702 (you can see 2 different background images and everything scrolls on top of it.)
      Is it possible to be done without having to code it via CSS every time?
    • mistrmint
      By mistrmint+
      Site : http://fireworxmedia.yourdemosite.co.za/
      I need to change the second menu items on hover to different colors.
      i.e factual needs to be blue on hover, fiction red on hover, etc. etc.
      then on the sub menu of factual, all need to hover blue with the main menu factual item staying as blue,
      and the sub menu of fiction needs to hover red with fiction item staying as red.
      etc. etc.
      For the life of me I cannot figure it out.
    • micstepl
      By micstepl+
      Feature request / state of the art idea
      Could you add to any Extension
      where there is an "Image" available  (eg. box Image, Image, etc.) and a "link" ist added >>> a HOVER funktionality <<<< This allows than the user to
      add an image (taking the same properes from the original / no changes allowed) advanced you could add a "transition"  and/or  "opacy"
    • jacobtippett
      By jacobtippett+
      I am trying to get the background image of the Revslider to be clickable and redirect to a link.
      Does anyone know how this is possible?