Png mit hover effekt?

[thementholist]

Hallo nochmals!

Ist es möglich eine png datei die bei mir als button fungiert: <div class="item"> <a href="#"> <img src="fahrzeugfolierungsicon.png" width="auto" height="50" mit einem hover effekt auszustatten.

Ich habe einige buttons die beim drübergehen größer und gelb werden. Diese bestehen aus material-icons.

<div class="menu" id="menu">
        <div class="item">
             <a href="menu2.html">
                <i class="material-icons">home</i>
                </a>
             </div>
    
    <div class="item">
             <a href="#">
        <i class="material-icons">directions_car</i>
        </a>
             </div>

Css zum hover den ich meine:

a>.material-icons:hover{
    color:#EC582A;
    transform: scale(1.3);

So und das selbe würde ich eben gerne auch bei meinem png icon machen. Warscheinlich wird es nicht möglich sein das es gelb wird da es keine font oder svg datei ist(ist das richtig?) Aber dennoch hätte ich gerne wenn es möglich wäre das mein icon auch größer wird. So sieht es ziemlich fad und unlebendig aus.

Vielen Dank schonmal

[Robert B.]

Moin,

macht es dir etwas aus, in deinem Thread zu bleiben?

Viele Grüße
Robert

[Rolf B]

Hallo Robert,

ups, nicht bemerkt.

Rolf

[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