PHOTO MODULE CSS HOVER EFFECTS

To get the CSS login on the homepage then return here and go to Page Builder >Tools> Layout CSS/Javascript.

EXAMPLE ONE

The first shows the default no hover effect. The second two have opacity added.  A custom class of simple-opacity under the Advanced tab.

EXAMPLE TWO

This uses a pseudo element to add an overlay with a transitions  and flexbox to centre a icon .  Modules have the custom class of hover-1.

EXAMPLE THREE

This is simple one using a grayscale filter. It does not work on older browsers (IE) Each module has the custom class of hover-2.

EXAMPLE FOUR

This is simple one using transform (rotate). Each module has the custom class of hover-3.

EXAMPLE FIVE (default captions in BB)

This is the default Beaver Builder look for showing an image Caption.

YELLOW TAXI
SPRING BLOSSOM
AUTUMN LEAVES

EXAMPLE FIVE (Version 2 with custom CSS)

This uses flexbox to move the caption and I change the pointer event to make it clickable.  Each module has the custom class of hover-4.

YELLOW TAXI
SPRING BLOSSOM
AUTUMN LEAVES
This takes me to the homepage

The CSS


/* Easy Hover Effect. 
You could just remove the custom class and use
.fl-photo-content for the whole site*/

.simple-opacity .fl-photo-content A:hover
{
 opacity: 0.88;
}


/*-------

Hover Effect ONE

-------*/

.hover-1 A
{
 color: #FFFFFF;
}
.hover-1 A:hover
{
 text-decoration: none;
}
.hover-1 .fl-photo-content A:hover::before
{
 background-color: #000;
 background-color: rgba(0, 0, 0, 0.573);
 -webkit-transition: 0.4s ease-in-out;
 -moz-transition: 0.4s ease-in-out;
 -o-transition: 0.4s ease-in-out;
 transition: 0.4s ease-in-out;
}

/*this add the icon you could remove.
Use a unicode if your theme does have the FontAwesome library loaded */

.hover-1 .fl-photo-content A:hover::before
{
 font-family: FontAwesome;
 content: "f00e";
 color: #FFFFFF;
 display: flex;
 align-items: center;
 justify-content: center;
 font-size: 30px;
}
.hover-1 .fl-photo-content A::before
{
 content: "";
 height: 100%;
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 -webkit-transition: 0.4s ease-in-out;
 -moz-transition: 0.4s ease-in-out;
 -o-transition: 0.4s ease-in-out;
 transition: 0.4s ease-in-out;
 pointer-events: all;
}


/*-------

Hover Effect TWO

grayscale does not work on IE

-------*/

.hover-2 .fl-photo-content A
{
 -webkit-transition: 0.5s ease-in-out;
 -moz-transition: 0.5s ease-in-out;
 -o-transition: 0.5s ease-in-out;
 transition: 0.5s ease-in-out;
 -webkit-filter: grayscale(100%);
 filter: grayscale(100%);
 
}
.hover-2 .fl-photo-content A:hover
{
 -webkit-transition: 0.5s ease-in-out;
 -moz-transition: 0.5s ease-in-out;
 -o-transition: 0.5s ease-in-out;
 transition: 0.5s ease-in-out;
 -webkit-filter: grayscale(0%);
 filter: grayscale(0%);
}


/*-------

Hover Effect THREE

-------*/

.hover-3 .fl-photo-content
{
 -o-transition: all 0.6s ease-in-out;
 -moz-transition: all 0.6s ease-in-out;
 -webkit-transition: all 0.6s ease-in-out;
 transition: all 0.6s ease-in-out;
}

.hover-3 .fl-photo-content:hover
{
 -ms-transform: rotateY(180deg);
 -o-transform: rotateY(180deg);
 -moz-transform: rotateY(180deg);
 -webkit-transform: rotateY(180deg);
 -webkit-transform-style: preserve-3d;
 transform: rotateY(180deg);
 transform-style: preserve-3d;
 -webkit-transition: all 0.6s ease-in-out;
 -moz-transition: all 0.6s ease-in-out;
 -o-transition: all 0.6s ease-in-out;
 transition: all 0.6s ease-in-out;
}
/*-------

Hover Effect FOUR

-------*/

.hover-4 .fl-photo-caption-hover
{
 background-color: #FFC619;
 height: 100%;
 font-weight: bold;
 display: flex;
 align-items: center;
 justify-content: center;
 font-size: 16px;
 pointer-events: none;
 white-space: normal; /*if only one line remove this*/
}

/* this is here because I added a link
in the caption that is the same colour as the background.
-------*/
.hover-4 .fl-photo-caption A
{
 color: #000000;
 text-decoration: underline;
}

...and a few affiliate links (well you never know)

Beaver Tunnels - Release The Beaver
Best Beaver Builder Add-ons
Ultimate Addons for Beaver Builder
Get Beaver Builder Now!