Vor ein paar Monaten habe ich in diesem Blog über die Möglichkeit mit CSS geschrieben, einen Social Media-Button zu vergrößern, wenn die Maus darüber fährt. Das hat auch ganz gut funktioniert, hatte aber einen Nachteil: Die Größenveränderung zieht die ganze Seite in Mitleidenschaft, sprich, alles was darunter ist, bewegte sich ebenfalls.

Mit einem Bild-Hover-Effekt kann man das auch besser lösen, durch Positionierung. Kurz gesagt: Eine Grafik kann aus zwei Teilen bestehen und je nach CSS wird die obere Hälfte oder die untere angezeigt. Das sieht dann so aus: Bild-Hover-Effekt

Für mein Projekt habe ich das etwas abgeändert und nur “einen” Button auf der Grafik, von der allerdings einige Pixel nicht angezeigt werden. So kann dann der Effekt entstehen, als würde der Button aus einem Schlitz in der Seite nach oben gehen.

Im CSS sind dazu drei Abschnitte notwendig:

Dieser Block führt die Grafik ein, wichtig ist vor allem display:block, der die Grafik als Blockelement darstellt, damit man ihr Breiten- und Höhenwerte zuordnen kann.

In diesem Fall wird die Grafik für den RSS-Feed eingefügt und positioniert. In meinem Fall wird die Grafik um 20 px nach unten verschoben, wobei die 20px “verschwinden. Der folgende CSS-Text sorgt schließlich dafür, dass diese 20px wieder erscheinen und die Grafik so eingebunden wird, wie sie eigentlich ist – sobald die Maus darüber fährt.

Im eigentlichen HTML-Dokument muss dann nur noch der Link eingefügt werden: <a href=”/feed.rss” class=”social-link rss”></a>

Im Einsatz kann man das ganze auf meinem Testportal matterne.dev4.fidion.desehen.

LEAVE A REPLY

Please enter your comment!
Please enter your name here