Results 1 to 3 of 3

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

  1. #1 Reply With Quote
    Veteran Feuerstern's Avatar
    Join Date
    Sep 2007
    Posts
    627
    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 is offline

  2. #2 Reply With Quote
    Foren-Frosch Kermit's Avatar
    Join Date
    Feb 2003
    Posts
    9,877
    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 is offline

  3. #3 Reply With Quote
    Veteran Feuerstern's Avatar
    Join Date
    Sep 2007
    Posts
    627
    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 is offline

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •