HTML Editor
<!DOCTYPE html> <html lang="en-US"> <head> <style> #outerDiv p{ width: 100%; text-align: center; } #outerDiv{ width: 100%; height: 150px; border: 1px solid #267326; padding: 10px; margin-bottom: 25px; display: flex; position: relative; text-align: center; } #innerDiv{ width: 80px; height: 80px; background-color: teal; color: #fff; line-height: 4; border: 1px solid #004d4d; position: absolute; top: 5%; left: 1%; } #outerDiv:hover > #innerDiv{ left: 85%; } </style> </head> <body> <h1>CSS transition Property</h1> <div id="outerDiv"> <p>Hover Me</p> <div id="innerDiv">Div</div> </div> <button onclick="myFunction()">Click Me</button> <script> var x = document.getElementById("innerDiv"); function myFunction(){ x.style.transition = "left 1s"; x.style.WebkitTransition = "left 1s"; } </script> <p><strong>Note</strong>: Hover the div before and after clicking on the button to see the difference.</p> </body> </html>
OUTPUT
×

Save as Private