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
Post a Comment