<!DOCTYPE html>
<html lang="en"><head>
<meta charset="utf-8">
<title>Transitions</title>
<style>
div.tr {transition:width 3s,background-color 3s; width:150px; height:250px; background-color:#0000cc; color:white; font-family:monospace;}
div.tr:hover {width:700px; background-color:#cc0000;}
</style>
</head>
<body>
<div class="tr">Do a mouse over to see the transition effect.<br>
<img src="images/catsup.jpg" alt="world's largest catsup bottle"></div>
</body>
</html>
