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.
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.
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)
