.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?
Welche Farben passen zum Logo gut
-
-
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:
CSS.HP:hover { width: 200px; height: 200px; } .HP:hover .HP1 { background-size: 100% 100%; }
Damit solltest du was anfangen können. -
@Thouz:
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.
-
Alles anzeigen
.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%;
}Hat geklappt vielen dank
