Bei Hover wird ein weiteres Element animiert gezeigt

Hover-Element

Hallo!

Code

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

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

/* CSS */
div {
    background-color: #369;
    position: relative; /* Eltern-Element! */
    […]
}

/* das <p> im <div> */
div p {
    […]
    position: absolute;
    top: 15px;
    
    /* Anfangsposition außerhalb des sichtbaren Bereiches */
    left: -2000px;
    
    /* Festlegen der Transition */
    transition: all 0.5s ease-in-out;  
}

/* 
    wenn sich der Cursor auf dem <div> befindet,
    wird das <p> in den sichtbaren Bereich verschoben
*/
div:hover p {
    /* Position des p bei Hover */
    left: 200px;
}