Tutorial & code

Image Hover Effects

A collection of CSS hover over effects for the Beaver Builder Photo Module. Use the Beaver Junction plugin to audition and tweak these before committing to your site.

Minimum BB plugin required:      Saved under:  
Skill level:     Contributor: 

Template Location

Bj Custom Rows Nav 1

Video

Notes

A collection over CSS hover effect for the Beaver Builder Photo module.

  1. The CSS for each photo is contained in the advanced tab under the CSS section (see image)
  2. If you want to use the same effect on many images it could be better to add you own selector apply to the whole site (see below)

 

Beaver Builder Hover Effects

Using the effect globally

  1. Add your own custom class to the module. (see image below)
  2. Add this selector to the CSS before everything starting with  .fl-photo-content 
    .my-selector.fl-photo-content .fl-photo-img{

Beaver Builder My Selector

See the Image Hover Effects template in action.

Code

CSS

/*----------------------------------------------------------------------------------------------------------
Add your own class selector before each rule.
Then move the CSS to you preferred location (styles.css, the Customizer, BB global styles etc.).
.my-selector .fl-photo-content {
overflow: hidden;}
------------------------------------------------------------------------------------------------------------*/
/* Zoom out on hover */

.fl-photo-content {
overflow: hidden;
}
.fl-photo-content .fl-photo-img {
transition: 0.5s ease-in-out;
will-change: transform;
}
.fl-photo-content .fl-photo-img:hover {
transition: 0.5s ease-in-out;
transform: scale(1.2);
}
/* original source:
https://docs.wpbeaverbuilder.com/beaver-builder/layouts/modules/photo/add-hover-effects-to-the-photo-module/
*/

/* Zoom in on hover*/
.fl-photo-content {
overflow: hidden;
}
.fl-photo-content .fl-photo-img {
transition: 0.9s ease-in-out;
transform: scale(1.3);
will-change: transform;
}
.fl-photo-content .fl-photo-img:hover {
transition: 0.9s ease-in-out;
transform: scale(1);
}
/* original source:https://docs.wpbeaverbuilder.com/beaver-builder/layouts/modules/photo/add-hover-effects-to-the-photo-module/*/

/* Zoom out & rotate on hover */
.fl-photo-content {
overflow: hidden;
}
.fl-photo-content .fl-photo-img {
transform: rotate(10deg) scale(1.2);
transition: .5s ease-in-out;
will-change: transform;
}
.fl-photo-content .fl-photo-img:hover {
transform: rotate(0) scale(1);
}
/* original source:https://docs.wpbeaverbuilder.com/beaver-builder/layouts/modules/photo/add-hover-effects-to-the-photo-module/*/

/* Unblur on hover */
.fl-photo-content {
overflow: hidden;
-webkit-backface-visibility: hidden;
}
.fl-photo-content .fl-photo-img {
filter: blur(2px);
transition: .3s ease-in-out;
will-change: filter;
}
.fl-photo-content .fl-photo-img:hover {
filter: blur(0);
}
/* original source:https://docs.wpbeaverbuilder.com/beaver-builder/layouts/modules/photo/add-hover-effects-to-the-photo-module/*/

/* Grayscale To Color */
.fl-photo-content {
overflow: hidden;
-webkit-backface-visibility: hidden;
}
.fl-photo-content .fl-photo-img {
filter: grayscale(100%);
transition: .3s ease-in-out;
will-change: filter;
}
.fl-photo-content .fl-photo-img:hover {
filter: grayscale(0);
}

/* original source:https://docs.wpbeaverbuilder.com/beaver-builder/layouts/modules/photo/add-hover-effects-to-the-photo-module/*/
/* Sepia To Color */
.fl-photo-content {
overflow: hidden;
-webkit-backface-visibility: hidden;
}
.fl-photo-content .fl-photo-img {
-webkit-filter: sepia(100%);
filter: sepia(100%);
-webkit-transition: .3s ease-in-out;
transition: .3s ease-in-out;
will-change: filter;
}
.fl-photo-content .fl-photo-img:hover {
-webkit-filter: sepia(0);
filter: sepia(0);
}

/* original source:https://docs.wpbeaverbuilder.com/beaver-builder/layouts/modules/photo/add-hover-effects-to-the-photo-module/*/

/* Shine */
.fl-photo-content{
position: relative;
}
.fl-photo-content::before {
position: absolute;
top: 0;
left: -75%;
z-index: 0;
display: block;
content: '';
width: 30%;
height: 100%;
background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,.3) 100%);
-webkit-transform: skewX(-25deg);
transform: skewX(-25deg);
}
.fl-photo-content:hover::before {
animation: shine .75s;
}
@-webkit-keyframes shine {
100% {
left: 125%;
}
}

@keyframes shine {
100% {
left: 125%;
}
}

/*original source:https://codepen.io/nxworld/pen/ZYNOBZ*/

/* Flash*/
.fl-photo-content:hover img {
opacity: 1;
animation: flash 1.5s;
}
@-webkit-keyframes flash {
0% {
opacity: .4;
}
100% {
opacity: 1;
}
}
@keyframes flash {
0% {
opacity: .4;
}
100% {
opacity: 1;
}
}

/* original source:https://codepen.io/nxworld/pen/ZYNOBZ*/

/* Overlay and Contrast */
.fl-photo-content{
background:#C3A17B;
}
.fl-photo-content img {
opacity: 1;
filter: contrast(90%) grayscale(0%);
transition: .5s ease-in-out;
}
.fl-photo-content:hover img {
opacity: 0.2;
filter: contrast(1000%) grayscale(100%);
transition: .5s ease-in-out;
}
/*box-shadow on hover*/
.fl-photo-content img{
transition-timing-function: ease-in-out;
transition-duration: 0.4s; 
}

.fl-photo-content img:hover {
box-shadow: 0 15px 20px 0 rgba(0, 0, 0, 0.3); /* Horizontal/Vertical/Blur/Spread/Color */
transition-timing-function: ease-in-out;
transition-duration: 0.4s; 
}

/* Here is a generator to combine CSS box-shadow effects
https://cssgenerator.org/box-shadow-css-generator.html

/*Remove box-shadow added to BB*/
.fl-photo-content img{
transition-timing-function: ease-in-out;
transition-duration: 0.4s; 
}

.fl-photo-content img:hover {
box-shadow: none; 
transition-timing-function: ease-in-out;
transition-duration: 0.4s; 
}

/* Move up/down or left/right*/
.fl-photo-content img{
transform: translateY(0); /*change to translateX for left/right */
transition: all .4s ease-in-out;
}

.fl-photo-content img:hover {
transform: translateY(-10px); /*change to translateX for left/right */
transition: all .4s ease-in-out;
}

/*clip-path expanding circle*/

.fl-photo {
background-color: #f2f2f2;
}

.fl-photo img{
clip-path: circle(40% at 50% 50%);
box-shadow: 0 15px 20px 0 rgba(0, 0, 0, 0.3); /* Horizontal/Vertical/Blur/Spread/Color */
transition: 0.5s ease-in-out;
}

.fl-photo img:hover{
clip-path: circle(48% at 50% 50%);
transition: 0.5s ease-in-out;
}

/*
Generate new shapes here
https://bennettfeely.com/clippy/
*/

/*clip-path parallelogram*/

.fl-photo {
background-color: #f2f2f2;
}

.fl-photo img{
clip-path: polygon(25% 0%, 100% 0%, 75% 100%, 0% 100%);
transition: 0.5s ease-in-out;
}

.fl-photo img:hover{
clip-path: polygon(0 0, 100% 0%, 100% 100%, 0% 100%); 
transition: 0.5s ease-in-out;
}
/*clip-path rhombus*/
.fl-photo {
background-color: #f2f2f2;
padding: 20px;
}
.fl-photo img{
clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
transition: 0.5s ease-in-out;
}

.fl-photo img:hover{
clip-path: polygon(100% 0, 100% 100%, 0 100%, 0 0);
transition: 0.5s ease-in-out;
}

Can you improve this template?

We'd love it if you can so please comment and share.

For help please post to the Beaver Builder Beginners Facebook group or the YouTube video with this post.

Leave a Comment