Ergebnis 1 bis 3 von 3

Mit HTML und CSS einen Kreis mit seinem Mittelpunkt plaztieren und beim hovern skalieren

  1. #1 Zitieren
    Ritter Avatar von Feuerstern
    Registriert seit
    Sep 2007
    Beiträge
    1.799
    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

    [Bild: kreis_bsp.png]
    Feuerstern ist offline

  2. #2 Zitieren
    Foren-Frosch Avatar von Kermit
    Registriert seit
    Feb 2003
    Beiträge
    9.894
    Vereinfacht würde ich das so in etwa machen:

    Code:
    <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.
    Kermit ist offline

  3. #3 Zitieren
    Ritter Avatar von Feuerstern
    Registriert seit
    Sep 2007
    Beiträge
    1.799
    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:

    HTML-Code:
            .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%);
            }
    Feuerstern ist offline

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •