Codepen example: http://codepen.io/anon/pen/Bydgyo
What I want to achieve: when hovering over one quarter of the circle, give that quarter an opacity 0.6.
however, that ".home-menu__quarter" div is set to 'position:relative' in order to keep the
text over the image.
<div class="home-menu__quarter home-menu__quarter--1">
Because of the position:relative style, if I try to hover over the image, the 'opacity 0.6' kicks in before i get to the quarter (i.e the part that is hidden by the border-radius 50%.).
Any idea, no matter how hacky is welcome, because this is doing my head in. Thanks :)
Best How To :
I have an idea : here it is
Even though you put border-radius :50%; the image on which you make the hover effect still doesn't get border-radius, it only gets clipped, so when you hover the image (the part which is clipped) , it triggers the opacity.
In my pen i removed the hover effect, and added an overlay to each
#home-menu__quarter . this is the extra css added : (you should look at my codepen to see what i excluded)
border-top-left-radius : 150px;
So for example this div :
<div class="effect nasty-trick-1"></div>
if it is inside the top-left quarter creates an overlay, when hovered makes the background-color black (with an alpha opacity of 0.4). Hope you enjoy it :)