Title: Make Caption Always Visible
Last modified: December 28, 2016

---

# Make Caption Always Visible

 *  [COSenna](https://wordpress.org/support/users/cosenna/)
 * (@cosenna)
 * [9 years, 5 months ago](https://wordpress.org/support/topic/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](https://s23.postimg.org/ua1j9p2aj/imagecaption.jpg)
 * 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](https://wordpress.org/support/users/cosenna/).

Viewing 2 replies - 1 through 2 (of 2 total)

 *  [ecclescake](https://wordpress.org/support/users/ecclescake/)
 * (@ecclescake)
 * [9 years, 5 months ago](https://wordpress.org/support/topic/make-caption-always-visible/#post-8601970)
 * 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](https://wordpress.org/support/users/cosenna/)
 * (@cosenna)
 * [9 years, 5 months ago](https://wordpress.org/support/topic/make-caption-always-visible/#post-8623532)
 * 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](http://www.leechristianlaw.com)
 * 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.

 * ![](https://ps.w.org/foogallery/assets/icon-256x256.gif?rev=2602542)
 * [Photo Gallery by FooGallery : Responsive Image Gallery, Masonry Gallery & Carousel](https://wordpress.org/plugins/foogallery/)
 * [Frequently Asked Questions](https://wordpress.org/plugins/foogallery/#faq)
 * [Support Threads](https://wordpress.org/support/plugin/foogallery/)
 * [Active Topics](https://wordpress.org/support/plugin/foogallery/active/)
 * [Unresolved Topics](https://wordpress.org/support/plugin/foogallery/unresolved/)
 * [Reviews](https://wordpress.org/support/plugin/foogallery/reviews/)

 * 2 replies
 * 2 participants
 * Last reply from: [ecclescake](https://wordpress.org/support/users/ecclescake/)
 * Last activity: [9 years, 5 months ago](https://wordpress.org/support/topic/make-caption-always-visible/#post-8601970)
 * Status: not resolved