beaverbuilder
3/3/2018 - 4:29 PM

Add Hover effects to the Photo module

This snippet is used in the following knowledge base article – https://kb.wpbeaverbuilder.com/article/608-add-hover-effects-to-the-photo-module

sepia-img.css
content_copyfile_download
/* 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);
}
hover-zoom-out.css
content_copyfile_download
/*  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);
}
hover-zoom-out-rotate.css
content_copyfile_download
/* 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);
}
hover-zoom-in.css
content_copyfile_download
/* 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);
}
hover-unblur.css
content_copyfile_download
/* 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);
}
gray-scale-img.css
content_copyfile_download
/* 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);
}