Title: Hover image effect
Last modified: August 30, 2016

---

# Hover image effect

 *  Resolved [John K](https://wordpress.org/support/users/janezcoinify/)
 * (@janezcoinify)
 * [10 years, 4 months ago](https://wordpress.org/support/topic/hover-image-effect/)
 * Hey,
 * I’m trying to add an effect to images I upload with site origin image widget.
   In the attributes tab I add custom css code but it does not work on hover.
 * example code:
 * img.grayscale {
    filter: url(“data:image/svg+xml;utf8,<svg xmlns=\’[http://www.w3.org/2000/svg](http://www.w3.org/2000/svg)\’
   ><filter id=\’grayscale\’><feColorMatrix type=\’matrix\’ values=\’0.3333 0.3333
   0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\’/></filter
   ></svg>#grayscale”); /* Firefox 3.5+ */ filter: gray; /* IE6-9 */ -webkit-filter:
   grayscale(100%); /* Chrome 19+ & Safari 6+ */ }
 * img.grayscale:hover {
    filter: none; -webkit-filter: grayscale(0%); }
 * Any ideas how to make it work? It turns grey but doesnt turn to color on mouseover.
 * [https://wordpress.org/plugins/so-widgets-bundle/](https://wordpress.org/plugins/so-widgets-bundle/)

Viewing 2 replies - 1 through 2 (of 2 total)

 *  Plugin Support [Andrew Misplon](https://wordpress.org/support/users/misplon/)
 * (@misplon)
 * [10 years, 4 months ago](https://wordpress.org/support/topic/hover-image-effect/#post-6803067)
 * Hi John
 * It depends how you’re doing this. If you’re adding the above to the CSS Styles
   field, it won’t work.
 * Please, check my quick overview here:
 * [https://siteorigin.com/thread/how-do-page-builder-row-attributes-work-row-class-cell-class-and-css-styles/](https://siteorigin.com/thread/how-do-page-builder-row-attributes-work-row-class-cell-class-and-css-styles/)
 *  Thread Starter [John K](https://wordpress.org/support/users/janezcoinify/)
 * (@janezcoinify)
 * [10 years, 4 months ago](https://wordpress.org/support/topic/hover-image-effect/#post-6803277)
 * Hey Andrew,
 * I think I understand it better now, thanks. I just assign the image a class and
   then add the effect to that class in my style.css sheet.
 * It works now. 🙂
 * Thanks again,
    John

Viewing 2 replies - 1 through 2 (of 2 total)

The topic ‘Hover image effect’ is closed to new replies.

 * ![](https://ps.w.org/so-widgets-bundle/assets/icon.svg?rev=2556862)
 * [SiteOrigin Widgets Bundle](https://wordpress.org/plugins/so-widgets-bundle/)
 * [Frequently Asked Questions](https://wordpress.org/plugins/so-widgets-bundle/#faq)
 * [Support Threads](https://wordpress.org/support/plugin/so-widgets-bundle/)
 * [Active Topics](https://wordpress.org/support/plugin/so-widgets-bundle/active/)
 * [Unresolved Topics](https://wordpress.org/support/plugin/so-widgets-bundle/unresolved/)
 * [Reviews](https://wordpress.org/support/plugin/so-widgets-bundle/reviews/)

 * 2 replies
 * 2 participants
 * Last reply from: [John K](https://wordpress.org/support/users/janezcoinify/)
 * Last activity: [10 years, 4 months ago](https://wordpress.org/support/topic/hover-image-effect/#post-6803277)
 * Status: resolved