look at those images, the first row last image with the orange stuff, there is a little pink bird xD when you hover that image the bird becomse invisible cause of the banner.
Your container is set to "overfowl:hidden;" to hide the text below the title, and the bird is in the container. so.. you should give this brid more space and set it maybe directly in the body tag and set his position via JavaScript.
It's easy cause you're using already jquery.
In the and It would be a static tooltip of the container. (I hope you know what I mean).
@wolfcry911 is right, I was to fast in answering and to slow in thinking..
scribble is right about the overflow: hidden; causing the issue - but you need it for the effect your looking for. What you need to do is reserve some height above the initial pic for the bird, so that it won't be hidden. So pad the .item 60px on top. Then increase the height by 60px (because your using border-box box sizing). And finally, and a negative 60px top margin to item to more or less hide the padding.
+1 to @wolfcry911. That's a pretty clever solution.
And for yet another way to do it with just CSS, you can take the overflow:hidden; off of the .item div and put it on the a tag. That way only the part that you're actually hiding is hidden. Here's a quick pen to show you what I mean:
z-indexing is typically handled on the parent level of your elements, so in your case, since the children of #content were showing up behind the children of #slider, your problem exists with those specific div siblings.
Hello,
http://atiweb.org/others/bkl/
look at those images, the first row last image with the orange stuff, there is a little pink bird xD when you hover that image the bird becomse invisible cause of the banner.
how should i solve this?
It's really simple, -y-o-u- -c-a-n-'-t- -(-w-i-t-h- -j-u-s-t- -c-s-s-)-!- ^^
Your container is set to "overfowl:hidden;" to hide the text below the title, and the bird is in the container. so.. you should give this brid more space and set it maybe directly in the body tag and set his position via JavaScript. It's easy cause you're using already jquery.
In the and It would be a static tooltip of the container. (I hope you know what I mean).
@wolfcry911 is right, I was to fast in answering and to slow in thinking..
you can do it with just css...
scribble is right about the overflow: hidden; causing the issue - but you need it for the effect your looking for. What you need to do is reserve some height above the initial pic for the bird, so that it won't be hidden. So pad the .item 60px on top. Then increase the height by 60px (because your using border-box box sizing). And finally, and a negative 60px top margin to item to more or less hide the padding.
+1 to @wolfcry911. That's a pretty clever solution.
And for yet another way to do it with just CSS, you can take the
overflow:hidden;off of the.itemdiv and put it on theatag. That way only the part that you're actually hiding is hidden. Here's a quick pen to show you what I mean:http://cdpn.io/EsqnI
i found the problem a bit after i posted this, but here i found better solutions. my solution was this tho:
and yeah its not as yours.
+1 wolf and howl
http://atiweb.org/others/bkl/
Looks like you've got your solution.
z-indexing is typically handled on the parent level of your elements, so in your case, since the children of
#contentwere showing up behind the children of#slider, your problem exists with those specific div siblings.CSS-Tricks Video Screencast 40