Hallo!
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;
}