将圆形图像分成4片

Question

假设我有这张图片：

现在，我要实现的是：当鼠标悬停在特定的切片上时，该切片将变得更大一些，而圆圈的其余部分将变得模糊。

即使使用Javascript，JQuery和CSS，我也真的不知道该怎么做！也许我可以绘制图像，但是我仍然对如何实现所需的功能存有疑问。

圆形图像的4种不同颜色将是4种不同的图像，因此我既可以将它们photoshop在一起，也可以使用HTML使它们看起来像圆形。.我可以同时使用这两种解决方案。

谢谢，抱歉我的英语不好。

Answer 1

这可以通过仅CSS实现：D

您将制作一个包含四个部分的包装纸。通过将边界半径设置为每季度一个角，可以创建圆。在:hover您可以更改使用的大小transform: scale();和使用模糊opacity的时候.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>

Answer 2

在这里，您仅需使用CSS即可实现。

将所有四个div包裹在一起，.container然后赋予它们相同的值height，weigth 即：.scale{height: 150px; weight 150px}要形成四分之一圈，您需要添加border-radius属性。之后，您需要通过以下方式处理hover事件

.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);
}

演示版

.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);
}

.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);
}