CODEWITHSUNDEEP
jqueryhtmlcsscss-position
vita
vita

Reputation: 63

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

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

Answers (1)

ali404
ali404

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

Related Questions