Bounce Grid Gallery

Look Demo

Add this hover animation to the grid gallery block. This plugin uses css editor and works with all template families.

How To Install

Insert a Gallery Block on your page, upload your images, and give each image their own title.

From the Design style setting, adjust to your liking. Below are the suggested settings. Cropping your images to the selected aspect ratio is also recommended.

When done, save the gallery and page.

Next, go to the Custom CSS Editor. Copy and paste the code below into the Custom CSS Editor box.

// Grid Gallery Bounce Titles //

@media all and (min-width:770px){
  .sqs-block-gallery .sqs-gallery-design-grid .slide{
    overflow: hidden;
  }
  .sqs-block-gallery .sqs-gallery-design-grid .slide:hover .image-slide-title{
    top: 40% !important
  }
  .sqs-block-gallery .sqs-gallery-design-grid .slide:hover  img{
    -webkit-filter: brightness(60%);
    filter: brightness(60%);
  }
  .sqs-block-gallery .sqs-gallery-design-grid .slide img{
    -webkit-transition: all .3s ease-in-out !important;
    -moz-transition: all .3s ease-in-out !important;
    -o-transition: all .3s ease-in-out !important;
    transition: all .3s ease-in-out !important;
  }
  .sqs-block-gallery .sqs-gallery-design-grid .slide .image-slide-title{
    position: absolute;
    top: -50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    pointer-events: none;
    -webkit-transition: all 600ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
    transition:         all 600ms cubic-bezier(0.175, 0.885, 0.32, 1.275); 
    font-size: 50px !important;
    font-weight: 400 !important;
    color: white !important;
    padding: 10px;
  }
}

Customize

To adjust the brightness of the overlay, change both of the brightness(60%) values to you liking. Going above 60% will make it brighter and going below 60% will make it darker.

To adjust the title's font size, change the font-size: 50px value to the desired size.

License

This plugin comes with an Unlimited Use License. View License Terms