How to prevent css hover effects executing before you reach the element with your mouse?

Tags: jquery,html,css,css3,css-position

Problem :

Codepen example:

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">
     <img src=""/>

    #home-menu .home-menu__quarter{
      height: 50%;
      width: 50%;
      float: left;

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 :)

Solution :

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 :)

    CSS Howto..

    How to override CSS :hover?

    How to remove the effect of all the parent containers on any child control

    How to dim an image keeping transparency untouched with CSS or JS?

    How to create a row of three expandable/collapsible divs which react on hover?

    How to use this CSS font technique?

    CSS - How to break long words in a table td?

    How to style a particular paragraph element in css without effecting the other paragraphs in the same class?

    Awkward gap between menu items. How to fix?

    How to override custom placeholder css

    How to use several css classes to one element?

    How to center this flip card example?

    CSS: How to shrink first div in container instead of going outside of container (second container should be shown just after first) [closed]

    How to show overflowing text with animation?(Javascript - HTML - CSS)

    Nth-child css property is counting html elements with display property set to none. How to change it?

    HTML, CSS: How to override settings from *{}(!important is not working) [closed]

    How to integrate many CSS files

    Understanding how VS parses CSS in .ascx docs

    How can I override an inline style with an external css?

    CSS/HTML How to align these elements for a mobile view?

    How to style for first class css

    How to make rounded corner cut-out using CSS?

    How do I make a table show a vertical scroll bar without explicitly setting the height?

    How to show “next”, “previous” buttons on an image (on mouseover)?

    How to create column with two divs one fixed above second that hides behind first when scrolling?

    Chrome and Firefox handle zoom differently. How to deal with this in my CSS

    How to automatically choose which css to use depending on the URL/website and/or server I'm on?

    How to make styling and functioning of form elements get not to break in all browsers?

    how to load different css files with different screen sizes?

    CSS: How to attach an arrow to a div and make it overlap the border

    How to access CSS on img tag