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); }