Png mit hover effekt?

[Rolf B]

Hallo thementholist,

den transform kannst Du auf jeden Fall machen, du musst nur einen passenden CSS Selektor für dein img konstruieren. Um im Schema zu bleiben, kannst Du dem img im a eine Klasse wie "image-icons" geben, dann könntest Du dies schreiben:

a>.image-icons:hover{
    transform: scale(1.3);
}

Um einen Farbeffekt hervorzurufen gibt es mehrere Möglichkeiten.

• Im einfachsten Fall ersetzt Du das Bild einfach durch ein anderes.
• Du kannst statt eines img auch ein background-image für das a Element setzen. Dieses background-image könnte so gestaltet sein, dass es das "normale" und das "gehoverte" Bild enthält, aber das Hover-Bild außerhalb des sichtbaren Bereichs ist. Beim :hover schaltest Du die Background-Position um und verschiebst damit den sichtbaren Ausschnitt. Ein Beispiel dazu habe ich gerade nicht, aber wenn Du dazu was suchst, wären "CSS Sprites" ein Stichwort.
• Wenn dein PNG teilweise transparent ist, könntest Du mit background-color arbeiten.
• Du kannst auch mittels des ::before Pseudo-Elements eine Ebene über das img legen, und das Pseudo-Element teiltransparent einfärben. Ggf. kannst Du mit dem mix-blend-mode noch interessante Effekte erzielen.

Rolf