Skip to content

Instantly share code, notes, and snippets.

@beaverbuilder
Last active March 3, 2018 20:04
Show Gist options
  • Save beaverbuilder/473906340e391282ce6bbb29abc516ed to your computer and use it in GitHub Desktop.
Save beaverbuilder/473906340e391282ce6bbb29abc516ed to your computer and use it in GitHub Desktop.
This snippet is used in the following knowledge base article – https://kb.wpbeaverbuilder.com/article/608-add-hover-effects-to-the-photo-module
/* Grayscale To Color */
.gray-scale-img .fl-photo-content {
overflow: hidden;
-webkit-backface-visibility: hidden;
}
.gray-scale-img .fl-photo-content .fl-photo-img {
-webkit-filter: grayscale(100%);
filter: grayscale(100%);
-webkit-transition: .3s ease-in-out;
transition: .3s ease-in-out;
will-change: filter;
}
.gray-scale-img .fl-photo-content .fl-photo-img:hover {
-webkit-filter: grayscale(0);
filter: grayscale(0);
}
/* Unblur on hover */
.hover-unblur .fl-photo-content {
overflow: hidden;
-webkit-backface-visibility: hidden;
}
.hover-unblur .fl-photo-content .fl-photo-img {
-webkit-filter: blur(3px);
filter: blur(3px);
-webkit-transition: .3s ease-in-out;
transition: .3s ease-in-out;
will-change: filter;
}
.hover-unblur .fl-photo-content .fl-photo-img:hover {
-webkit-filter: blur(0);
filter: blur(0);
}
/* Zoom in on hover */
.hover-zoom-in .fl-photo-content {
overflow: hidden;
}
.hover-zoom-in .fl-photo-content .fl-photo-img {
-webkit-transition: 0.3s ease-in-out;
transition: 0.3s ease-in-out;
will-change: transform;
}
.hover-zoom-in .fl-photo-content .fl-photo-img:hover {
-webkit-transition: 0.3s ease-in-out;
transition: 0.3s ease-in-out;
-webkit-transform: scale(1.3);
transform: scale(1.3);
}
/* Zoom out & rotate on hover */
.hover-zoom-out-rotate .fl-photo-content {
overflow: hidden;
}
.hover-zoom-out-rotate .fl-photo-content .fl-photo-img {
-webkit-transform: rotate(15deg) scale(1.4);
transform: rotate(15deg) scale(1.4);
-webkit-transition: .3s ease-in-out;
transition: .3s ease-in-out;
will-change: transform;
}
.hover-zoom-out-rotate .fl-photo-content .fl-photo-img:hover {
-webkit-transform: rotate(0) scale(1);
transform: rotate(0) scale(1);
}
/* Zoom out on hover*/
.hover-zoom-out .fl-photo-content {
overflow: hidden;
}
.hover-zoom-out .fl-photo-content .fl-photo-img {
-webkit-transition: 0.3s ease-in-out;
transition: 0.3s ease-in-out;
-webkit-transform: scale(1.3);
transform: scale(1.3);
will-change: transform;
}
.hover-zoom-out .fl-photo-content .fl-photo-img:hover {
-webkit-transition: 0.3s ease-in-out;
transition: 0.3s ease-in-out;
-webkit-transform: scale(1);
transform: scale(1);
}
/* Sepia To Color */
.sepia-img .fl-photo-content {
overflow: hidden;
-webkit-backface-visibility: hidden;
}
.sepia-img .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;
}
.sepia-img .fl-photo-content .fl-photo-img:hover {
-webkit-filter: sepia(0);
filter: sepia(0);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment