How do you make an image enlarge when you hover over it?

You could use an absolutely positioned wrapper which will hold the background image:

<div class="flower">
  <div class="wrap"></div>
  <p>A text</p>
</div>

.flower {
  width: 450px;
  padding: 110px 0;

  position: relative;
  overflow: hidden;
}

.flower > .wrap {
  background-image: url(http://media02.hongkiat.com/ww-flower-wallpapers/roundflower.jpg);
  background-repeat: no-repeat;
  background-size: cover;

  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;

  transform: scale(1);
  transition: transform 1.5s ease-in-out;
  z-index: -1;
}

.flower:hover > .wrap {
  transform: scale(1.5);
}

You can also see the pen over here: http://codepen.io/enslavedeagle/pen/ZOraOX

Thanks for your help. It is looking better but the image enlarges when I hover over other areas of the page not just when I hover over the image. What do you think I am doing wrong to cause this? Also if I click on the thumbnail it opens up on another page. How do I prevent it from opening up on another page. I have the code I used bellow- HTML <div class="thumbnail1"> <a target="_blank" href="image1.jpg"> <img src="image1.jpg" alt="Fjords" </a> </div>

<div class="thumbnail2"> <a target="_blank" href="forest.jpg"> <img src="image2.jpg" alt="Forest" </a> </div>

<div class="thumbnail3"> <a target="_blank" href="lights.jpg"> <img src="image3.jpg" alt="Northern Lights" </a> </div>

CSS .thumbnail1 { width: 450px; padding: 0px 0;

position: relative; overflow: hidden; }

.thumbnail1 > .wrap {

background-repeat: no-repeat; background-size: cover;

position: absolute; top: 0; bottom: 0; left: 0; right: 0;

transform: scale(1); transition: transform 0.5s ease-in-out; z-index: -1; }

.thumbnail1 { transition: all 0.4s ease-in-out; } .thumbnail1:hover {transform: scale(1.5); margin: -50px 0px 60px 100px;} }

.thumbnail2 { transition: all 0.4s ease-in-out; } .thumbnail2:hover { transform: scale(1.6); margin: -50px 0px 60px 300px;}

.thumbnail3 { transition: all 0.0s ease-in-out; } .thumbnail13:hover { transform: scale(1.6); margin: -50px 40px 60px -100px;}

To prevent it from opening another page when you click it, you need to get rid of the <a> tag, which transforms the element into a link to another page.

Instead of enlarging only the image, your CSS enlarges the entire containers - which, by default, take 100% width of the page. This is what is causing enlargement when you place your cursor by the image.

I can see more clearly what you're trying to do, and I think you don't need divs here at all. What you need to do here, is to make a .thumbnail class and apply it to your images.

The CSS will be as simple as this:

.thumbnail {
  display: block;
  transition: all .4s ease-in-out;
}
.thumbnail:hover {
  transform: scale(1.5);
  margin: -50px 0 60px 100px;
}

http://codepen.io/enslavedeagle/pen/grdBbz

Thanks for your response. I am still having the same issue. I tried removing the <a> tag to remove to prevent it from linking to another page. I was told to remove the "target="_blank" to stop the image from opening up in another page but that did not work either. When I removed the <a> tag with the first of the three thumbnails the first thumbnail didn't change and the other two thumbnails dissapeared. Using the code I provided the three thumbnails sit bellow the main image nicely and all three thumbnails enlarge but they do not enlarge when hovered over. For example the third thumbnail enlarges when I hover over to the end of the right side of the page and the thumbnail is on the left side. What do you think the reason for this is? Here is the code I used- http://codepen.io/Johned22/pen/vKzAyd

I did try that but the images are stacked on top of each other. I am having trouble lining them up next to one another. I have one large image then the three thumbnails I want to be placed under it. Similar to this page- http://www.tvisionfitness.com/product/beginner-men/