Hover-Effekt für runde Bilder

**sepp_a_u** · 12.04.2014, 20:03

Hallo zusammen,

wie kann ich runde Bilder mit Link mit einem grauen Layer überlegen, wenn man einen Mouse-Over macht? Ich habe für meine page folgendes verwendet:

Code:

.ce_image.g1 a:hover {/* partial hover-effect for the boxes */
    /* Gecko-Browser (Firefox) */
    background: -moz-linear-gradient(rgba(255, 255, 255, 0), rgba(150, 150, 150, 0.2));
    /* Webkit-Browser (Safari, Chrome) */    
    background: -webkit-linear-gradient(rgba(255, 255, 255, 0), rgba(150, 150, 150, 0.2));
    /* allgemein CSS3 */
    background: -linear-gradient(rgba(255, 255, 255, 0), rgba(150, 150, 150, 0.2));
}

Jedoch klappt das leider nicht wie gewünscht. Das Ergebnis kann man hier anschauen:
http://www.esobp.de/en/home.html
user: test
pw: beerpong

es sollte eher so wie hier aussehen:
http://www.bpong.com/
Hier sind auf der Startseite ebenfalls runde Bilder mit Hover-Effekt. Kann mir jemand sagen wie dies gemacht werden kann mit CSS?

Viele Grüsse und danke,
David

**tblumrich** · 12.04.2014, 20:16

Wieviel Threads zu ein und derselben Seite hast du eigentlich gerade am Laufen? Und bei Ungeduld immer drauf achten das es Wochenende ist...

Sorry, aber das fällt auf, wenn man heute mal durchs Forum schaut.

In einem anderen Thread hast du die Antwort doch schon bekommen... da wird beim hover einfach die opacity runter gesetzt - mehr nicht. Mit einem Developer Tool kann man das alles herausfinden.

Schönes Wochenende!