a:hover not working because of z-index

Question

I purchased a theme and am trying to modify it so some images on homepage appear black and white and when you hover they return their color. Hovering over the image has no effect due to the z-index afaik.

.boxies {
   filter: url(filters.svg#grayscale); 
   filter: gray; 
   -webkit-filter: grayscale(1); 
}

.boxies:hover{
   filter: none;
   -webkit-filter: grayscale(0);
}

img{
   display: block;
   position: relative;
   width: 100%;
   z-index: 10; 
}

.front_holder {
   position: absolute;
   display: block;
   width: 100%;
   height: 100%;
   top: 0;
   left: 0;
   z-index: 24;
   opacity: 1;
   filter: alpha(opacity = 100);
   overflow: hidden;
   padding: 5px;
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   box-sizing: border-box;
   -webkit-transform: translateZ(0px);
}

<img src="relaxation.jpg" alt="" class="boxies">
<div class="front_holder">
   <a class="qbutton small" href="/manicure/" target="_self" style="background-color: transparent;height: 46px;line-height: 46px;">RELAXATION</a>
</div>

When I disable the z-index of "front_holder" in the Chrome inspector, the image hover works as it should. You can see what is happening here: http://itlive.ca/deleteme/ (the 6 images on the homepage).

Any help would be greatly appreciated. Bob :)

Answer 1

that is just because your z-index of the front_holder element is bigger than the image,so your just need to change your hover event to the parent of your img and your front_holder

.q_image_with_text_over:hover .boxies{
  filter: none;
  -webkit-filter: grayscale(0);
}

Answer 2

Try it. Use another a tag to warp the img.

<a href="/manicure/"><img src="relaxation.jpg" alt="" class="boxies"></a>

Add css pointer-events: none to front_holder like it.

.front_holder {
   pointer-events: none;
}

Answer 3

you could change like this:

.q_image_with_text_over:hover img{
   filter: none;
   -webkit-filter: grayscale(0);
}