Let’s say I have this image:
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 >_>
3
Answers
You could use 4 separate images to display your image positioned with css
then add an onmouseover to each image to change its width and height
example
Or you could do something similar with svg
A quick and easy way to blur the other 3 quadrants is to include that in the mouseover as well, say for the red quadrant that becomes
in order to restore the original images use an onmouseout for each img tag
in the case of the red quadrant add an onmouseout like
It would require you to have both blurred and unblurred images for each quadrant
If you want to do something fancier with blurring you could use SVG or CSS
This can be done CSS-only 😀
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 usingtransform: scale();
and the blur usingopacity
when.wrapper:hover .quarter
.Here you go, you achieve it only with css.
wrap all of your four divs in one
.container
then give them sameheight
andweigth
i.e:
.scale{height: 150px; weight 150px}
and to make a quarter of circle you need to addborder-radius
property. after that you need to handle thehover
event byDemo