Contao Dozent Marvin Kellermann

|

Icon Hover mit Schatten

Hover Icon

Icons können mehr als eine bloße Information transportieren - zum Beispiel zum Interagieren anregen. Vielleicht befindet sich hinter deinem Icon ein Link zu einer anderen Seite, einem Produkt oder ähnlichem und dem User ist gar nicht klar, dass er mit einem klick auf das Icon an einen anderen Ort gelangt.

Icon beim drüber-hovern mit Schatten und Vergrößerung ausstatten

Um dem PC-User (auf dem Smartphone und Tablet zu bedingt einsetzbar) zu verdeutlichen, dass er dieses Icon anklicken kann, soll ein Hover-Effekt zum Einstz kommen, der sowohl das Icon vergrößert, als auch einen Schlagschatten hinzufügt. Damit der Effekt smooth abläuft, habe ich noch eine transition-duration von 0.2 Sekunden hinzugefügt. So sieht der Code aus:

.cc_icon:hover{
transition: 0.20s;
scale:1.2;
text-shadow: 2px 2px 5px rgba(100,100,100,0.6);
}

.cc_icon{
font-size: 50px;
transition: 0.2s;
}

Kurze Anmerkung zum Text-Shadow - hier habe ich mit RGBA gearbeitet, da ich finde der Schatten sieht aufgrund des Alpha-Kanals und damit der Transparenz deutlich schöner aus; logischer Weise kann hierbei aber auch ein RGB- oder HEX-Code verwendet werden.

Die zweite Transition sorgt dafür, dass die Größe des Icons beim Entfernen des Mauszeigers nicht automatisch auf den Anfangswert zurückschnallt, sondern einen leichten fade hat - das ist deutlich angenehmer!

Zurück

Ich beschäftige mich seit Contao 3 mit dem CMS. Auf meinem Blog und auf YouTube findest du einige kostenlose Beiträge und Videos. Gerne unterstütze ich dich bei deinen Projekten, schau gern auf meiner Agentur-Website vorbei.

Du benötigst Unterstützung bei deiner Contao-Instanz?