Diese kleinen ausfahrbaren Elemente sind ja manchmal auch ganz schickt. Besonders für Telefonnummern oder Adressen oder E-Mail-Adresse, die man nicht in einem großen Störer präsentieren will.
Das Anlegen der Elemente ist garnicht mal so schwierig. Folgend sehr ihr, was ihr machen müsst.
#box {
position: fixed;
right: 0;
top: 112px;
transform: translateX(383px); /* Hier schiebt ihr die Box als Standard aus dem Bildschirmrand */
transition: all 0.5s ease-out 0s; /* Die Box soll langsam ausfahren */
}
#box:hover {
transform: translateX(0px); /* Beim Hover soll die Box wieder in den Bildschirm reinfahren */
}