Reputation: 63
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">
<p>text1</p>
<img src="http://i.imgur.com/KJg9cRl.jpg"/>
</div>
#home-menu .home-menu__quarter{
height: 50%;
width: 50%;
margin:0;
float: left;
position:relative;
}
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 :)
Upvotes: 2
Views: 159
Reputation: 1153
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)
.effect {
position: absolute;
width: 100%;
height: 100%;
top: 0;
}
.effect:hover {
background-color: rgba(0,0,0,0.4);
}
.nasty-trick-1 {
border-top-left-radius : 150px;
}
.nasty-trick-2 {
border-top-right-radius: 150px;
}
.nasty-trick-3 {
border-bottom-left-radius: 150px;
}
.nasty-trick-4 {
border-bottom-right-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 :)
Upvotes: 2