This tutorial is specific for galleries, not on page images or products, those have different “code names” in css so I am covering them in different tutorials.

There are 6 main types of galleries, and all of them can be edited individually.

Now all of the effects we are creating today are done with a little custom CSS magic and I will walk you through it step by super simple step in this video.

The codes we are using are below, but be sure to watch the whole tutorial so you understand how to use them!

Gallery Code Names:

Grid: Simple

.gallery-grid-item img

Grid: Strips

.gallery-strips-item img

Grid: Masonry

.gallery-masonry-item img

Slideshow: Simple

.gallery-slideshow-item img

Slideshow: Full

.gallery-fullscreen-slideshow-item img

Slideshow: Reel

.gallery-reel-item img

Zoom Effect Codes:

Combine these codes with the right gallery style code name from the list above

Zoom on hover

...img:hover{height:100%!important; width:100%!important; transform:Scale(1.2); overflow:hidden!important;} Gallery-code-name{overflow:hidden!important}

Zoom out on hover

...img{height:100%!important; width:100%!important; transform:Scale(1.2); overflow:hidden!important;} ...img:hover{transform:scale(1)} gallery-code-name{overflow:hidden!important}

Smooth zoom transition

...img:hover{height:100%!important; width:100%!important; transform:Scale(1.2); Overflow:hidden!important; transition-duration:1s} Gallery-code-name{overflow:hidden!important}