Make Caption Always Visible

  • COSenna

    (@cosenna)


    9 years, 5 months ago

    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 9 years, 5 months ago by COSenna.
Viewing 2 replies - 1 through 2 (of 2 total)
  • ecclescake

    (@ecclescake)

    9 years, 5 months ago

    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!

    Thread Starter COSenna

    (@cosenna)

    9 years, 5 months ago

    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)

The topic ‘Make Caption Always Visible’ is closed to new replies.