Dividieren Kreis Bild in 4 Scheiben

Question

Lassen Sie uns sagen, ich habe dieses Bild:

Nun, was will ich erreichen ist: wenn die Maus eine bestimmte Scheibe bewegen, dass Scheibe wird ein wenig größer becames und Der Rest des Kreises wird verschwimmen.

Ich kann wirklich keine Idee, wie das geht, auch mit Javascript, JQuery und CSS! Vielleicht könnte ich das Bild zuordnen, aber ich habe immer noch Zweifel, wie ich erreichen kann, was ich brauche.

Die 4 verschiedenen Farben meines Kreisbildes werden 4 verschiedene Bilder sein, also kann ich sie beide zusammen photoshop oder verwenden HTML, um sie wie ein Kreis erscheinen zu lassen .. Ich kann beide dieser Lösung verwenden.

Vielen Dank und sorry für mein schlechtes Englisch> _>

Answer 1

nutzen könnten diese kann getan werden nur CSS: D

Sie werden einen Wrapper machen, der die vier Viertel enthält. Indem Sie den Grenzradius pro Quartal an einer Ecke festlegen, erstellen Sie den Kreis. Auf :hover können Sie die Größe unter Verwendung transform: scale(); und die Unschärfe unter Verwendung opacity wenn .wrapper:hover .quarter ändern.

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

Sie 4 separate Bilder verwenden könnte Ihr Bild mit CSS dann fügen Sie ein Onmouseover zu jedem Bild positioniert anzuzeigen seine Breite und Höhe

zu ändern

Beispiel

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

Oder Sie könnten etwas ähnliches mit svg

Eine schnelle und einfache Art und Weise tun, um die ot zu verwischen Ihre 3 Quadranten sind, dass in den Mouseover umfassen auch, sagen für die roten Quadranten, die

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"' 

um die Originalbilder eine onmouseout-Tag für jeden img im Fall des roten Quadranten add verwenden wiederherstellen wird ein onmouseout wie

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"' 

Es müssten Sie beide verschwommen und unblurred Bilder für jeden Quadranten haben Wenn Sie etwas wollen, schicker tun mit Unschärfe Sie SVG oder CSS

Answer 3

Hier gehen Sie, können Sie es nur mit CSS erreichen.

wickeln alle Ihre vier divs in einem .container dann geben sie gleiche height und weigth heißt: .scale{height: 150px; weight 150px} und ein Viertel des Kreises Sie border-radius Eigenschaft hinzufügen müssen machen.Danach müssen Sie durch

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