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