Skip to main content

Image Hover rollover change effect

Gallery  

Settings > Link > Type to Item for the gallery element,

you can already choose two hover effects at 

Settings > Image > Transition: Scale Up and Scale Down.

Additionally, you can customize the overlay color in the Style settings of YOOtheme Pro.    

 

CSS for grid

.el-image {
  transition: filter 0.3s ease;
}

.el-image:hover {
  filter: grayscale(100%);
}

/*
.el-image {
  transition: filter 0.3s ease;
  filter: grayscale(100%);
}

.el-image:hover {
  filter: grayscale(0%);
}
*/
  • Hits: 6