Matteo Gesmundo Matteo Gesmundo - 5 months ago 27
jQuery Question

Divide circle image into 4 slice

Let's say I have this image:

circle image 4 slice

Now, what I want to achieve is: when the mouse hover a particular slice, that slice will becames a little bigger and the rest of the circle will blur.

I really can't get an idea how to do that, even with Javascript, JQuery and CSS! Maybe I could map the image, but I still have some doubt how to achieve what I need.

The 4 different color of my circle image will be 4 different image, so I can both photoshop them together or use HTML to make them appear like a circle.. I can use both of this solution.

Thank you and sorry for my bad english >_>

Answer

This can be done CSS-only :D

You'll make a wrapper containing the four quarters. By setting the border-radius on one corner per quarter, you'll create the circle. On :hover you can change the size using transform: scale(); and the blur using opacity when .wrapper:hover .quarter.

div.wrapper { position: relative; width: 100px; height: 100px; border-radius: 50px; }
div.quarter { position: absolute; width: 50px; height: 50px; background-color: #333; transition: transform .5s, opacity .5s; }
div.quarter.left-top { left: 0; top: 0; border-top-left-radius: 50px; }
div.quarter.right-top { left: 50px; top: 0; border-top-right-radius: 50px; }
div.quarter.left-bottom { left: 0; top: 50px; border-bottom-left-radius: 50px; }
div.quarter.right-bottom { left: 50px; top: 50px; border-bottom-right-radius: 50px; }
div.wrapper:hover div.quarter { opacity: .5; }
div.quarter:hover { opacity: 1 !important; transform: scale(1.5) }
<div class="wrapper">
  <div class="quarter left-top"></div>
  <div class="quarter right-top"></div>
  <div class="quarter left-bottom"></div>
  <div class="quarter right-bottom"></div>
</div>