Enlarge Images When Mouse Hover

HTML & CSS
5

Hi bsfns5,

In addition to @coothead 's fine example, there is also another way to enlarge your images by using transform with scale.
transform:scale();

It will give you an effect that is similar to a lightbox or modal, in that it does not push on other content around the image when hovered for zoom. However, it can be difficult to keep it in view if you scale it too much.

Here is a zip file with the example and demo image I used.
image-scale.zip (48.5 KB)

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Image Transform Zoom</title>
<style>
.wrap {
   max-width:900px;
   margin:auto;
}
.zoom {
   width:60%;
   max-width:480px;
   margin:auto;
   padding:1em;
   background:#ccc;
   border-radius:10px;
   text-align:center;
}
.zoom img {
   display:block;
   margin:0 0 1em;
   max-width:100%;
   height:auto;
   border-radius:10px;
   transition:transform 0.5s;
}
.zoom img:hover {
   transform:scale(1.7) ;
}
</style>

</head>
<body>
<div class="wrap">
   <p>Lorem ipsum dolor sit amet consectetuer Sed et Mauris nisl feugiat. Leo ut eget at lorem tellus
   laoreet dis convallis enim feugiat. Ligula sit Vivamus porttitor nibh nec mattis Nulla interdum.</p>
   <p>Est risus libero ante dapibus pretium auctor condimentum consequat quis Lorem. Aliquet dui
   nascetur iaculis dui Sed at et ac eleifend a. Sed orci pede et.</p>
   <figure class="zoom">
      <img src="gilmour.jpg" width="480" height="320" alt="David Gilmour">
      <figcaption>Mouseover image to enlarge</figcaption>
   </figure>
   <p>Lorem ipsum dolor sit amet consectetuer Sed et Mauris nisl feugiat. Leo ut eget at lorem tellus
   laoreet dis convallis enim feugiat. Ligula sit Vivamus porttitor nibh nec mattis Nulla interdum.</p>
   <p>Est risus libero ante dapibus pretium auctor condimentum consequat quis Lorem. Aliquet dui
   nascetur iaculis dui Sed at et ac eleifend a. Sed orci pede et.</p>
</div>
</body>
</html>