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