Support » Plugin: FooGallery - Image Gallery WordPress Plugin » Make Caption Always Visible

  • Hello,

    I’m using the latest version of the foogallery and the BeaverBuilder plugin and theme to aid me in a very simple, 6 image gallery on my site.

    *I would share the link to my site, however it is still being built on a localhost!

    I definitely want the Responsive Image gallery option with the Caption “Fade In” effect.

    I resized the caption using this css:

    #foogallery-gallery-3652 {
    	font-size: 20px;
            
    }

    What I was hoping to do was make it so the caption remains visible at all times, and the background “fade in” still works on hover.

    Here is a screenshot of my site: Screenshot

    Is there a way to do this using custom css?

    **Also, I’m being picky here, but as you can see in the screenshot, the fade-in effect overlays the fixed menu. Is there a way to eliminate that as well?

    Thanks in advance!

    Zach

    • This topic was modified 3 months, 3 weeks ago by COSenna.
Viewing 2 replies - 1 through 2 (of 2 total)
  • You could try something like this:

    .foogallery-default .foogallery-caption {
        background: rgba(0,0,0,0.6);
    }
    .foogallery-default .foogallery-caption:hover {
        background: rgba(0,0,0,0.8);
    }

    On my Responsive Image gallery (on a Beaver Builder site, no less), it makes the caption background a lighter translucent color, then darkens it on hover. You can change the RGB and alpha values to suit your needs.

    The gallery settings are “Hover effect type: caption” and “Caption Effect: always visible”.

    If your captions don’t cover the entire image, you’ll need to find a different element to apply a hover style to.

    Don’t forget, you can right-click on an element in your browser and look at its CSS rules and edit them to try to figure out how things work. That’s how I got this working. I looked for the CSS rule that applied the background, then I made it lighter and added a rule for the hover state.

    Hope that helps!

    Thanks for the reply ecclescake! You got me on the right track so far. I think because my Caption effect is set to “Fade In” that that tidbit of CSS doesn’t help much.

    I did, however, launch the site: LeeChristianLaw

    I fixed the “fade in” effect “overlaying the menu” problem by taking the z-index down to 0. Really not sure what other effects or problems that may cause the gallery but it seems to do fine without it thus far.

    I am still having trouble finding the right css to change it so that the caption always remains visible. This section seems to hold all the CSS for the caption that I should be looking at:

    /* Caption Styles */
    
    .foogallery-default.hover-effect-caption a {
    	position: relative;
    }
    
    .foogallery-default.hover-effect-caption a:before,
    .foogallery-default.hover-effect-caption a:before:hover {
    	background: none !important;
    }
    
    .foogallery-default .foogallery-caption {
    	display: block;
    	background-color: rgba(0,0,0,0.8);
    	position: absolute;
    	z-index: 0;
    	-webkit-transition: all 300ms ease-out;
    	-moz-transition: all 300ms ease-out;
    	-o-transition: all 300ms ease-out;
    	-ms-transition: all 300ms ease-out;
    	transition: all 300ms ease-out;
    	width: 100%;
    	overflow: hidden;
    }
    
    .foogallery-default.hover-effect-caption .foogallery-caption-title,
    .foogallery-default.hover-effect-caption .foogallery-caption-desc {
    	color: #fff;
    	font-size: 0.8em;
    	padding: 0.25em;
    }
    .foogallery-default.hover-effect-caption .foogallery-caption-title {
    	font-size: 1em;
    }

    Any more suggestions on how I make the caption always visible?

    Thanks again!

Viewing 2 replies - 1 through 2 (of 2 total)
  • You must be logged in to reply to this topic.