Bei Hover wird weiteres Element gezeigt

Hover-Element

Hallo!

&
Das Et-Zeichen, auch Und-Zeichen oder kaufmännisches und-Zeichen, ist ein in bestimmten Fällen verwendbares Ersatzzeichen für das Wort „und“ (lat. et). Es wird umgangssprachlich auch als Kaufmanns-Und, kaufmännisches Und oder Firmen-Und bezeichnet, da es im Geschäftsbereich vielfach verwendet wird und in zahlreichen Firmennamen enthalten ist. Wikipedia

Code

Schaut Euch den Source-Code an, um den ganzen Code zu sehen!

<!-- html -->
<div>
    Hover-Element
    <p>Hallo!</p>
</div>

/* CSS */
div p {
  width: 300px;
  background-color: #369;
  padding: 1em;
  border-radius: 8px;
  box-shadow: 0 0 10px 2px rgba(0, 0, 0, 0.3);

  position: absolute;
  top: 15px;

  /* Anfangsposition außerhalb des sichtbaren Bereiches */
  left: -2000px;

  /* Festlegen der Transition incl der Dauer (hier 0.5 Sekunden) */
  transition: all 0.5s ease-in-out;
}

/* bei Hover über <div> wird das <p> sichtbar */
div:hover p {
  /* Position des p bei Hover */
  left: 160px;
}