Photoshop Question posted in
The official user guide can be found here.

Divide circle image into 4 slice – Photoshop

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 >_>

Tags:

3

Answers


  1. 0

    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

    <img src='grey_quadrant' id='grey' width=100 height=100 style='position: absolute; top: 0px; left:0px' onmousover='this.width=120; this.height=120'>

<img src='red_quadrant' id='red' width=100 height=100 style='position: absolute; top: 0px; left:100px' onmousover='this.width=120; this.height=120'>

<img src='blue_quadrant' id='blue' width=100 height=100 style='position: absolute; top: 100px; left:0px' onmousover='this.width=120; this.height=120'>

<img src='brown_quadrant' id='brown' width=100 height=100 style='position: absolute; top: 100px; left:100px' onmousover='this.width=120; this.height=120'>

    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

    onmousover='this.width=120; this.height=120; document.getElementById("blue").src="blurred_blue_quadrant.jpg"; document.getElementById("grey").src="blurred_grey_quadrant.jpg";document.getElementById("brown").src="blurred_brown_quadrant.jpg"'

    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

    onmouseout='this.width=100; this.height=100; document.getElementById("blue").src="blue_quadrant.jpg"; document.getElementById("grey").src="grey_quadrant.jpg";document.getElementById("brown").src="brown_quadrant.jpg"'

    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

    Login or Signup to reply.
  2. 0

    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 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>
    Login or Signup to reply.
  3. 0

    Here you go, you achieve it only with css.

    wrap all of your four divs in one .container then give them same height and weigth
    i.e: .scale{height: 150px; weight 150px} and to make a quarter of circle you need to add border-radius property. after that you need to handle the hover event by

    .scale:hover{
  transform: scale(1.1);
  z-index: 100;
    filter: blur(0) !important;
  -webkit-filter: blur(0) !important;
}
.container:hover .scale{
  filter: blur(5px);
  -webkit-filter: blur(5px);
}

    Demo

    .container{
  position: relative;
  height: 300px;
  width: 300px;
}
.scale{
  height: 150px;
  width: 150px;
  background-size: cover;
  position: absolute;
  transition: 0.3s all;
}
div#one {
  background-image: url(http://dummyimage.com/150.png/09f/fff);
  -moz-border-radius: 150px 0 0 0;
  border-radius: 150px 0 0 0;
  left: 0;
  top: 0;
}
div#two{
   background-image: url(http://dummyimage.com/150.png/f00/fff);
  -moz-border-radius: 0 150px 0 0;
  border-radius: 0 150px 0 0;
  right: 0;
}
div#three{
  background-image: url(http://dummyimage.com/150.png/f60/fff);
  -moz-border-radius: 0 0 150px 0;
  border-radius: 0 0 150px 0;
  bottom: 0;
  right: 0;
}
div#four{
  background-image: url(http://dummyimage.com/150.png/000/fff);
  -moz-border-radius: 0 0 0 150px;
  border-radius: 0 0 0 150px;
  bottom: 0;
}
.scale:hover{
  transform: scale(1.1);
  z-index: 100;
    filter: blur(0) !important;
  -webkit-filter: blur(0) !important;
}
.container:hover .scale{
  filter: blur(5px);
  -webkit-filter: blur(5px);
}
    <div class="container">
  <div class="scale" id="one"></div>
  <div class="scale" id="two"></div>
  <div class="scale" id="three"></div>
  <div class="scale" id="four"></div>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search