Welche Farben passen zum Logo gut

.HP {
margin-top: 3%;
margin-left: 20%;
position: absolute;
width: 140px;
height: 120px;
background: none repeat scroll 0% 0% rgb(82, 82, 82);
}

Oder möchtest du das sich beides vergrößert, oder nur das Icon?

So wir machen das in Prozent angaben wie Greekz gesagt hatte, dass ist einfacher

.HP1 {
background: url(../img/HP.png);
background-size: 40% 40%;
width: 140px;
height: 120px;
background-repeat: no-repeat;
background-position: center;
transition: all 1s;
}

.HP1:hover {

transition: all 2s;
background-size: 60% 60%;
}

Ist es nicht schlauer das Icon in der :hover benötigten Größe abzuspeichern und dann einfach für den normalen Zustand zu verkleinern?
Denn so wird es total unscharf beim :hover...

btw: Ich würde für dein Logo eine verschnörkelte/handgeschriebene Schriftart nutzen.
Sie passt mMn besser zu dem Thema "Coffe(e)".

/Edit1: Stichwort "transition" - ease-in-out...

Gruß, Thomas/Thouz.

So:

.HP:hover {
width: 200px;
height: 200px;
}


.HP:hover .HP1 {
background-size: 100% 100%;
}

Damit solltest du was anfangen können.

tommes:

Das liegt am Icon, nicht am Hover selbst. Das Icon hat standart gemäßt eine größe von 32px x 32px . Auch wenn du es in Photoshop vergrößert, wird es verpixelt werden. Er muss einfach ein größeres Icon verwenden.