Core CSS

Resize an Image on Hover

This CSS Reference section displays the code for an example that illustrates how to resize an image when someone hovers over it.

ResizeOnHover.html

<!DOCTYPE html>
<html>
  <head>
    <title>XoaX.net's CSS</title>
    <style>
      img.cExpand {
        width:100px;
      }
      img.cExpand:hover {
        width:initial;
        height:initial;
      }
    </style>
  </head>
  <body>
    <h3>The Crucifixion</h3>
    <img class="cExpand" src="TheCrucifixion_LeonBonnat.png" />
    <h3>by Leon Bonnat</h3>
  </body>
</html>
 

Output

 
 

© 2007–2025 XoaX.net LLC. All rights reserved.