Slider Revolution WP
09.27.2016
Black & White Hover Effect for Essential Grid Items
Use the following CSS to add a black and white / gray-scale effect for your grid items.
With the following CSS, your grid items would start out as black & white, and then transform to color on mouse hover.
Modify the “.your-item-skin-name-” part with whatever your Item Skin’s “Class Prefix” is.
For example, in the following screenshot, the “Class Prefix” is:
.eg-item-skin-1-
So with the above Class Prefix, the CSS snippet below would need to be modified from this:
.your-item-skin-name-wrapper .esg-entry-media img {
to this:
.eg-item-skin-1-wrapper .esg-entry-media img {
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
.your-item-skin-name-wrapper .esg-entry-media img { filter: url("data:image/svg+xml;utf8,<svg xmlns='https://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"); filter: gray; -webkit-filter: grayscale(100%); } .your-item-skin-name-wrapper:hover .esg-entry-media img { filter: url("data:image/svg+xml;utf8,<svg xmlns='https://www.w3.org/2000/svg'><filter id='grayscale'><feColorMatrix type='matrix' values='1 0 0 0 0, 0 1 0 0 0, 0 0 1 0 0, 0 0 0 1 0'/></filter></svg>#grayscale"); -webkit-filter: grayscale(0%); } |
