Fügen Sie dem Bild Glühen hinzu - css, image, glow

Ich versuche, eine ähnliche Wirkung zu erzielen Hier (in diesem Fall auf den Fokus in einem Formularfeld).Allerdings möchte ich es um ein kleines Bild, und bei Hover auftreten. Natürlich kann ich zwei Sprites erstellen und in CSS das Bild durch das Glow-Bild bei Hover ersetzen, aber das würde die Animation nicht beinhalten. Also momentan habe ich:

img.glow {
-webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease;
}

img.glow:hover {
border-color: rgba(82, 168, 236, 0.8);
outline: 0;
outline: thin dotted 9;
/* IE6-9 */

-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
-moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
}

Das funktioniert, aber das Problem ist, dass mein Bild hatabgerundete Ecken und der Glüheffekt tritt um das Bild als Ganzes auf (d. h. es behandelt das Bild als Quadrat und hinterlässt kleine weiße Ecken im Glühen, während ich möchte, dass das Glühen die Kanten des Bildes umschließt). Das Bild ist ein transparentes PNG. Was möchte ich machen?

Vielen Dank, G

Antworten:

2 für die Antwort № 1

Fügen Sie einfach ein ein border-radius Eigenschaft, so dass Ihr IMG-Element schöne runde Ecken hat. Die Schatten folgen der Form des Elements.


Speisekarte