html - a:hover not working because of z-index -


i purchased theme , trying modify images on homepage appear black , white , when hover return color. hovering on image has no effect due 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 disable z-index of "front_holder" in chrome inspector, image hover works should. can see happening here: http://itlive.ca/deleteme/ (the 6 images on homepage).

any appreciated. bob :)

that because z-index of front_holder element bigger image,so need change hover event parent of img , front_holder

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

Popular posts from this blog

c# - ODP.NET Oracle.ManagedDataAccess causes ORA-12537 network session end of file -

matlab - Compression and Decompression of ECG Signal using HUFFMAN ALGORITHM -

utf 8 - split utf-8 string into bytes in python -