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
This takes me to the homepage

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!