jquery - Fade in background/div with title/div always visible on top -


i have jquery fades in .gridhover. covers .title.

i tried changing z-index, hover effect stops when hovering title. tried duplicating title , fading in well, doesn't work , looks sloppy.

i keep .title visible @ times (maybe change color on hover of .gridhover) , hover effect hover-able on whole area of .gridhover.

firstly, possible? secondly, how? :)

html

<div class="gridcontainer" style="background-image: url('image.jpg'); background-repeat: no-repeat; background-size: cover; background-position: 50% 50%;">       <div class="title">title</div>       <a href="#">          <span class="gridhover"></span>      </a>  </div> 

jquery

// grid hover - overlay ----------------// $('.gridhover').each(function(index) {      $(this).hover(       function () {         $(this).fadeto(100, .85);       },       function () {         $(this).fadeto(400, 0);       }     );  }); 

css

span.gridhover {     width:100%;     height:100%;     position: absolute;     top: 0px;     left: 0px;     z-index: 11;     background:#fff;     opacity:0;     padding-top: 0px;     cursor: pointer; }  div.title {     text-align: center;     position:relative;     top: 50%;     font-family: 'rockwellstd', georgia, serif;     color: #fff;     z-index: 11; } 

is there reason why aren't binding hover event parent "gridcontainer" element instead of "gridhover?"


Comments

Popular posts from this blog

java - Could not locate OpenAL library -

c++ - Delete matches in OpenCV (Keypoints and descriptors) -

sorting - opencl Bitonic sort with 64 bits keys -