CSS Bilder mit kreis darstellen

[sepp_a_u]

Hallo zusammen,

ich möchte gerne Bilder als Kreise darstellen. Jedoch gelingt mir dies irgendwie nicht. Ich habe folgenden CSS-code:

.circledPicture { 
-moz-border-radius:100px; /* Firefox */
-webkit-border-radius:100px; /* Chrome, Safari */
-khtml-border-radius:100px; /* Konqueror */
border-radius:100px; /* CSS3 */
behavior:url(border-radius.htc); /* Internet Explorer */
width:100px;
height:100px;
}

Jedoch wird mein Bild einfach nur ganz klein und weder rund, noch sonst was. Kann mir jemand helfen?
Zu sehen auf:
http://www.esobp.de/en/home.html (user: test, pw: beerpong)

Dort sieht man unter dem text ein schwarzes kleines bild, welches eigentlich rund dargestellt sein sollte.

VIele Grüsse und danke,
David

[Sioweb]

Ho!

Erweitere figure und img um folgende Eigenschaften:

figure {
margin: 0;
}
img {
display: block;
}

Danach musst du dir halt im Klaren sein, dass ein Bild das 100px breit aber nur 40px hoch ist, nur als Elipse dargestellt wird, wenn du es nicht entsprechend abschneidest.

[sepp_a_u]

Vielen Dank für den Hinweis. Kannst Du mir noch helfen und sagen wie ich das Ganze das so ähnlich wie auf der Startseite hier darstelle:
http://www.bpong.com/

Dort sind ebenfalls solche kreise mit hover-effekten. Ist dies auch so zu realisieren?
Ebenso dann auch die Frage,wie ich die Kreise dann nebeneinander darstellen kann? ich habe nun einmal 5 Bilder einfach eingefügt, aber schaffe es weder mit dem gridsystem, noch mit etwas anderem, die Bilder nebeneinander darstzustellen...

Ich freue mich auf eure hilfe.

Viele Grüsse und danke,
David

[Spooky]

Die Bilder sehen dort von Haus aus schon so aus:

Der Hover Effekt wird mit JavaScript gemacht, welches einfach die opacity auf 0.6 setzt.

[Sioweb]

Klar kannst du das auch mit CSS lösen. Du sagst dem Element figure halt overflow hidden und einen Border-Radius von 25%. Mit Float left bekommst du auch alles nebeneinander oder mit display inline-block.

Such mal nach den Keywords, dann findest du da sicher was.