+40 image hover effects for your galleries

Imagehover.css is a very nice CSS Image Hover Effect library, that offers 44 effects for FREE.

Most of them work fine with Oxygen, but a few will work a bit weirdly (the imghvr-flip and imghvr-shutter-out-diag ones especially).

Step 1

Download the package : http://www.imagehover.io/
Upload and add the file imagehover.min.css

wp_enqueue_style( 'imagehover-css', plugin_dir_url( __FILE__ ) . 'assets/css/imagehover.min.css' );

[ see HOWTO to learn how to add custom files ]

Step 2

Add a new gallery.

IMPORTANT, select MASONRY as a Layout, as it doesn't work well in flex :

Don't forget to add some captions with your images, and be sure to "show the captions only on hover" :

Still in the Gallery settings, go to Hover :

And delete everything. The 3 fields must be empty :

Step 3

Add these CSS in a Code Block (you can change the background color) :

[class*=" imghvr-"], [class^="imghvr-"] , [class*=" imghvr-"]::before {  
	background-color:black
}

[class*=" imghvr-"], [class^=imghvr-] {
	transform:inherit!important
}

.oxy-gallery-captions .oxy-gallery-item .oxy-gallery-item-contents figcaption:not(:empty) {
     display:flex!important;
     justify-content:center;
     align-items:center
}

Step 4

Still in the Code Block but in the Javascript tab :

(function($) {
    'use strict';
    $(document).on('ready', function() {

        $('#_gallery-7-170 .oxy-gallery-item-contents').toggleClass('imghvr-zoom-out-up');
     
    });
}(jQuery));

Replace #_gallery-7-170 by your gallery ID and change the class 'imghvr-zoom-out-up' by the one you want to use.

All the classes are available in the official website : http://www.imagehover.io/

If you want to have different effects for each image of the same gallery, you can use this code instead. I have 12 images so I put 12 classes in the fx variable :

(function($) {
    'use strict';
    $(document).on('ready', function() {
      
	var fx = ['imghvr-push-up','imghvr-slide-left','imghvr-reveal-right','imghvr-hinge-down','imghvr-zoom-out','imghvr-zoom-out-flip-horiz','imghvr-shutter-out-horiz','imghvr-shutter-in-vert','imghvr-fold-left','imghvr-zoom-out-flip-vert','imghvr-zoom-out-up','imghvr-blur'];      

	$('#_gallery-7-170 .oxy-gallery-item-contents').each(function(i) {
		$(this).addClass(fx[i]);
	});           

    });
}(jQuery));