如何修改Cube Portfolio使作品Caption始终显示（替代Hover触发）

Hey there! I get it—tweaking a plugin's behavior when you're new to CSS/JS can feel overwhelming, but let's get those captions showing up everywhere, no hover required. Here are two straightforward ways to make this happen:

Method 1: Force Caption Display with CSS (Easiest!) #

Cube Portfolio likely uses CSS media queries to hide captions on small screens, and hover states to show them on desktop. We can override this with custom CSS that makes captions visible always, regardless of screen size or mouse interaction.

1. Open your website's CSS file (this might be named style.css, custom.css, or cube-portfolio.css—look for the styles linked in your HTML <head>).
2. Add this code at the bottom of the file:

/* Make captions visible on all screen sizes */
.cbp-caption,
.cbp-caption-overlay {
  opacity: 1 !important;
  visibility: visible !important;
  display: block !important;
}

/* Disable hover-based changes (so captions stay visible) */
.cbp-item:hover .cbp-caption,
.cbp-item:hover .cbp-caption-overlay {
  opacity: 1 !important;
  visibility: visible !important;
}

3. Save the file and refresh your website.

Quick Tip: Find Exact Class Names #

If the code above doesn't work, use your browser's developer tools (press F12, right-click a caption, and select "Inspect") to find the exact class names for your captions. Replace .cbp-caption and .cbp-caption-overlay with the classes you see in the inspector.

Method 2: Adjust Cube Portfolio's JavaScript Settings #

If CSS alone doesn't cut it, you can modify the plugin's initialization code to make captions load visible by default.

1. Look for the JavaScript code that initializes Cube Portfolio (usually in a <script> tag at the bottom of your HTML, or in a .js file like main.js). It will look something like this:

$('#js-filters-masonry').cubeportfolio({
  layoutMode: 'masonry',
  caption: {
    effect: 'fadeIn',
    delay: 0
  },
  // Other settings...
});

2. Update the caption section and add a showOnLoad option (or adjust hover behavior):

$('#js-filters-masonry').cubeportfolio({
  layoutMode: 'masonry',
  caption: {
    effect: 'fadeIn',
    delay: 0,
    showOnLoad: true // Forces captions to display when the page loads
  },
  onHover: false // Disables hover-based caption changes
  // Other settings...
});

3. If showOnLoad isn't an option, add this extra code to force captions active after page load:

$(document).ready(function() {
  // Add the "active" class to all portfolio items to show captions
  $('.cbp-item').addClass('cbp-caption-active');
});

Test It Out! #

After making these changes, check your website on both desktop and mobile. The captions should now stay visible at all times. If something still isn't working, use the browser inspector to check if any other CSS rules are overriding your custom styles (you can make your selectors more specific, like #work .cbp-caption instead of just .cbp-caption).

内容的提问来源于stack exchange，提问作者Malthe