PDA

Archiv verlassen und diese Seite im Standarddesign anzeigen : Mit HTML und CSS einen Kreis mit seinem Mittelpunkt plaztieren und beim hovern skalieren


Feuerstern
27.04.2020, 22:00
Hallo zusammen,
ich würde gerne einen Kreis mit CSS und HTML erstellen der seinen Radius beim Hovern vergrößert. Das habe ich auch hinbekommen, allerdings skaliert der Kreis nicht von seiner Mitte aus sonder wächst nach unten und rechts. Gerne würde ich den Kreis auch so platzieren können das die left und top Werte der Kreis Mitte entsprechen. Hat da jemand einen Lösung?

Um es zu veranschaulichen:
Ich würde den roten Kreis gerne mit den Parametern left: 30px, top: 60px so setzen wie im Bild. Wenn ich mit der Maus drüber fahre soll er sich vergrößern, so dass er wie der orangene Kreis den selben Mittelpunkt hat wie der rote

https://upload.worldofplayers.de/files12/kreis_bsp.png
Kermit
28.04.2020, 15:12
Vereinfacht würde ich das so in etwa machen:


<html>
<head>
<style>
.circle {
position:absolute;
left:50px;
top:50px;
width:40px;
height:40px;
border-radius:100px;
background-color:red;
transform:translate(-50%, -50%);
}
.circle:hover {
width:60px;
height:60px;
}
</style>
</head>
<body>
<div class="circle"></div>
</body>
</html>

Das entscheidende ist hier die "transform" Eigenschaft.
Feuerstern
28.04.2020, 22:53
Danke, das translate(-50%, -50%) hat es gebracht. Um auch vom Urspung aus zu skalieren habe ich noch ein "transform-origin: top left;" hinzugefügt:



.cirlce {
display: block;
position: absolute;
background-color: red;
border-radius: 50%;
width: 1.9034%;
height: 3.0267%;
transform: scale(1) translate(-50%, -50%);
transform-origin: top left;
transition:all .25s ease;
}
.cirlcer:hover {
transform: scale(1.5) translate(-50%, -50%);
}