CSS Bilder mit kreis darstellen

Hallo zusammen,

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

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

Ho!

Erweitere figure und img um folgende Eigenschaften:

Code:

---

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.

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

Die Bilder sehen dort von Haus aus schon so aus:

http://bpong.staging.wpengine.com/wp...sign-v4_03.png

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

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.