如何使用CSS移除WordPress模板中的图片Swipe Effect？

Hey there! Let’s figure out how to get rid of that annoying swipe effect when hovering over your gallery images. I’ve worked with similar WordPress album plugins before, so here’s a step-by-step breakdown:

First: Check if it’s CSS-driven #

Start by using your browser’s dev tools (hit F12, then use the element picker to select a gallery image). Hover over the image and watch the Styles panel for any changes related to transform, transition, or custom animation classes.

If you spot rules like transform: translateX(-10%) or a transition property on hover, you can override them with this CSS snippet (add it to your WordPress Customizer > Additional CSS, or your child theme’s style.css):

/* Disable swipe hover effect on gallery images */
.tm-pg-album-item:hover .tm-pg-album-image,
.tm-pg-album-image:hover {
  transform: none !important;
  transition: none !important;
  /* Reset any other animated properties like opacity if needed */
  opacity: 1 !important;
}

The !important flag ensures this rule takes precedence over the plugin’s default styles.

If CSS doesn’t work: It’s likely jQuery/JS-driven #

Some album plugins use JavaScript to add/remove classes or directly modify styles on hover. Here’s how to handle that:

• Use dev tools’ Sources tab to search for scripts related to hover, mouseenter, or swipe in your gallery plugin’s JS files. Look for code that adds a class like tm-pg-hover-active or modifies the transform property.
• Instead of editing the plugin’s JS (which will break on updates), you can either:
  1. Unbind the hover event: Add this snippet to your theme’s functions.php (or a custom JS plugin):

     jQuery(document).ready(function($) {
       // Replace .tm-pg-album-item with the correct selector for your images
       $('.tm-pg-album-item').off('mouseenter mouseleave');
     });
     

  2. Double down with CSS: Even if JS adds styles, the CSS snippet above should still override them thanks to !important. This is usually the safer option to avoid breaking other gallery functionality.

Quick Tip #

Always test changes in a staging environment first, and clear your site’s cache after adding CSS/JS to see the updates.

内容的提问来源于stack exchange，提问作者Grégory Santana