Image Zoom Animation with BeaverBuilder

I am a little disappointed that BeaverBuilder doesn’t offer the image zoom as one of it’s animations. Otherwise I LOVE the page builder. However, with a little CSS, I was able to do it on my own.

Here’s what I did:
1) I created each square with the Photo option under Basic Modules leaving the animation type set as none.
2) Then I added the class “zoom” to the photo advanced settings.

3) Then I added this CSS to the style sheet:
(Use the Simple Custom CSS plugin if you are not using a custom or child theme.)

.fl-photo-content {
	overflow:hidden;
}
.zoom img {
  -moz-transition: all 0.3s;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}
.zoom img:hover {
  -moz-transform: scale(1.1);
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
} 

This is the look I created:

This was for a holding page, if you check it out soon, you can see the it in action here: http://thecultivatedcollector.com/

*If you’re looking for more animations to add to your BeaverBuilder collection, try this plugin: WPD BB Additions