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.

VIDEO

CODE

Minimum BB plugin required: Lite Saved under: Rows
Skill level: Beginner Contributor: David Waumsley

Template Location

Video

Notes

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

The CSS for each photo is contained in the advanced tab under the CSS section (see image)
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)

Using the effect globally

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

See the Image Hover Effects template in action.

Example

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;
}

Discounts On These Two Lifetime Deals:

MainWP. Discount code "digitalfreedoms" 15% off
WP Code Box. Discount code "beaverjunction" 25% off

--------------------------------------------------------------

Get the Beaver Junction Plugins here

Get it now

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.