Runde Bilder: Hover nur im runden Bereich?

GDA_Web · 26.03.2017

Hey!

Ich habe Bild (innerhalb einer Div-Box) welches prinzipiell rund ist. Nun habe ich auf das Element via CSS3 einen Hover-Effekt draufgelegt.
Das Bild/Objekt ist zwar rund, allerdings aktiviert sich er Hover-Effekt natürlich schon, wenn sich die Maus im quadratischen Bereich um das Bild herum befindet (also in den Ecken, in denen das Bild eigentlich nicht sichtbar ist)

Gibt es eine Möglichkeit den Hover-Effekt wirklich nur im runden Bereich zu aktivieren? Abgerundete Div-Boxen habe ich bereits probiert.

Code:

.img_2 {
    border-radius: 100%;
    height: 200px;
    width: 200px;
}
.img_2:hover {
    opacity: 0.5;

Vielen Dank!

Chris_EDI · 26.03.2017

gib dem Img-Tag eine Klasse mit dem border-radius nicht den DIV's . Sollte funktionieren

Code:

.img_2 {
 
    height: 200px;
    width: 200px;
}
.img_2:hover {
    opacity: 0.5;
}
.rund{
    border-radius: 100%
}

Gelöschtes Mitglied 633957 · 26.03.2017

GDA_Web schrieb:
Gibt es eine Möglichkeit den Hover-Effekt wirklich nur im runden Bereich zu aktivieren? Abgerundete Div-Boxen habe ich bereits probiert.

HTML:

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
   .img_2 {
     border-radius: 100%;
     width: 200px;
     height: 200px;
     background: url(http://placehold.it/200x200/f90.jpg) no-repeat;
     background-size: 100% 100%;
   }
   .img_2:hover {
     opacity: 0.5;
   }
</style>
</head>
<body>
   <div class="img_2"></div>
</body>
</html>

HTML:

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
   .img_2 {
     border-radius: 100%;
     width: 200px;
     height: 200px;
   }
   .img_2:hover {
     opacity: 0.5;
   }
</style>
</head>
<body>
   <div><img class="img_2" src="http://placehold.it/200x200/f90.jpg"></div>
</body>
</html>

Sollte beides funktionieren! Möglicherweise behindert bei Dir ein Elternelement die korrekte Darstellung?

Edit: Oberen Code um "background-size: 100% 100%;" erweitert.

Chris_EDI · 26.03.2017

Das funktioniert nur, wenn das Image wirklich die gewünschte Größe des DIV's hat. Wenn das Bild größer ist, werden die Höhe und Breite der DIV's ignoriert.
Lieber dem IMG - Tag eine classe geben und dort Breite und Höhe definieren.

Gelöschtes Mitglied 633957 · 26.03.2017

Chris_EDI schrieb:
Das funktioniert nur, wenn das Image wirklich die gewünschte Größe des DIV's hat. Wenn das Bild größer ist, werden die Höhe und Breite der DIV's ignoriert.
Lieber dem IMG - Tag eine classe geben und dort Breite und Höhe definieren.

Stimmt, hätte ich noch dazu schreiben sollen! Habe meinen Code editiert und um

Code:

background-size: 100% 100%;

erweitert!

Chris_EDI · 26.03.2017

Und jetzt hat der TE die Qual der Wahl