Tryit Editor v3.6

<!DOCTYPE html>
<html>
<head>
<style> 
#myDIV {
  border: 1px solid black;
  background-color: lightblue;
  width: 270px;
  height: 200px;
  overflow: auto;
}

#myDIV:hover {
  background-color: coral;
  width: 570px;
  height: 500px;
  padding: 100px;
  border-radius: 50px;
}
</style>
</head>
<body>

<p>Mouse over the DIV element and it will change, both in color and size!</p>

<p>Click the "Try it" button and mouse over the DIV element again. The change will now happen gradually, like an animation:</p>

<div id="myDIV">
  <h1>myDIV</h1>
</div>

</body>

</html>

​x
 
<!DOCTYPE html><html><head><style> #myDIV {  border: 1px solid black;  background-color: lightblue;  width: 270px;  height: 200px;  overflow: auto;}​#myDIV:hover {  background-color: coral;  width: 570px;  height: 500px;  padding: 100px;  border-radius: 50px;}</style></head><body>​<p>Mouse over the DIV element and it will change, both in color and size!</p>​<p>Click the "Try it" button and mouse over the DIV element again. The change will now happen gradually, like an animation:</p>​<button onclick="myFunction()">Try it</button>​<div id="myDIV">  <h1>myDIV</h1></div>​<script>function myFunction() {  document.getElementById("myDIV").style.WebkitTransition = "all 2s"; // Code for Safari 3.1 to 6.0  document.getElementById("myDIV").style.transition = "all 2s";     // Standard syntax}</script>​</body>​<!-- Mirrored from www.w3schools.com/jsref/tryit.asp?filename=tryjsref_style_transition by HTTrack Website Copier/3.x [XR&CO'2014], Mon, 27 Jan 2020 03:03:42 GMT --></html>​

Save Your Code

Your Code Could Not be Saved

Your Code has Been Saved

Save to Google Drive

Open from Google Drive

Report a Problem: