What's wrong with my HOVER ON IMG

Question

I am desperate. Trying to implement a simple color change on an image on hover via css, I fail to find the proper way of using my selectors I think, but it's not exactly clear to me why it is not working. (i got it working for other pages on the site) Here is what I have for the css :

/* NO ROLLOVER > IMG is GRAY */

#post-1263 > div > div > div > div > div > div:nth-child(1) > div > div.vc_grid.vc_row.vc_pageable-wrapper.vc_hook_hover.owl-carousel.vc_grid-owl-theme.owl-loaded.owl-drag > div.owl-stage-outer.owl-height > div > div.owl-item.active > div > div:nth-child(1) > div.vc_grid-item-mini.vc_clearfix > div > div.vc_gitem-zone.vc_gitem-zone-a.vc_custom_1498264424124.img_holder > div > div > div > div > figure > div > img{
filter: url("data:image/svg+xml;utf8,<svg xmlns=\'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+ */
}

/* ROLLOVER > IMG is NOT GRAY */

#post-1263 > div > div > div > div > div > div:nth-child(1) > div > div.vc_grid.vc_row.vc_pageable-wrapper.vc_hook_hover.owl-carousel.vc_grid-owl-theme.owl-loaded.owl-drag > div.owl-stage-outer.owl-height > div > div.owl-item.active > div > div:nth-child(1) > div.vc_grid-item-mini.vc_clearfix > div > div.vc_gitem-zone.vc_gitem-zone-a.vc_custom_1498264424124.img_holder > div > div > div > div > figure > div:hover img{
 filter: none;
  -webkit-filter: none;
}

I'm guessing something is wrong with the way I call my selector but I couldn't find another way to call it so far ( I actually am extracting the selector from the web inspector menu )

page is here : http://lesateliersvortex.com/

May someone help me debug this please ? I think I can't see straight on this one anymore ://

Answer 1

Your selector are too long(visual composer classes are already unique) and there is another hover over the image that's why it's not working so add z-index , it's working

#post-1263 > div > div > div > div > div > div:nth-child(1) > div > div.vc_grid.vc_row.vc_pageable-wrapper.vc_hook_hover.owl-carousel.vc_grid-owl-theme.owl-loaded.owl-drag > div.owl-stage-outer.owl-height > div > div.owl-item.active > div > div:nth-child(1) > div.vc_grid-item-mini.vc_clearfix > div > div.vc_gitem-zone.vc_gitem-zone-a.vc_custom_1498264424124.img_holder:hover{filter: grayscale(0%);opacity: 1;-webkit-filter: grayscale(0%);}

#post-1263 > div > div > div > div > div > div:nth-child(1) > div > div.vc_grid.vc_row.vc_pageable-wrapper.vc_hook_hover.owl-carousel.vc_grid-owl-theme.owl-loaded.owl-drag > div.owl-stage-outer.owl-height > div > div.owl-item.active > div > div:nth-child(1) > div.vc_grid-item-mini.vc_clearfix > div > div.vc_gitem-zone.vc_gitem-zone-a.vc_custom_1498264424124.img_holder{
filter: url("data:image/svg+xml;utf8,<svg xmlns=\'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 */
z-index:9999999;
-webkit-filter: grayscale(100%); /* Chrome 19+ & Safari 6+ */
}