How to zoom in when hover on image but make border stay in place?

border, css, hover, zooming

Solution

Place the background image `div` within a container:

<div class="container">
  <div class="bolimg"></div>
</div>

Move the dimensions and border to the container, and give it `overflow: hidden`:

.container {
  width: 200px;
  height: 200px;
  border: 4px solid black;
  border-radius: 100px;
  overflow: hidden;
}

Use these styles for the `bolimg` class:

.bolimg {
  background: url('http://i60.tinypic.com/wb82e0.jpg') no-repeat;
  background-size: cover;
  width: 100%;
  height: 100%;
  transition: 2s ease-out;
}

And use these styles on its hover:

.bolimg:hover {
  background-image: url('http://i59.tinypic.com/k0szuv.jpg'); 
  height: 125%;
  width: 125%;
}

Animating height and width instead of scale solves a problem with Chrome and borders.

Complete code:

.container {
  width: 200px;
  height: 200px;
  overflow: hidden;
  border: 4px solid black;
  border-radius: 100px;
}

.bolimg {
  background: url('http://i60.tinypic.com/wb82e0.jpg') no-repeat;
  background-size: cover;
  width: 100%;
  height: 100%;
  -webkit-transition: 2s ease-out;
  -moz-transition: 2s ease-out;
  -o-transition: 2s ease-out;
  -ms-transition: 2s ease-out;
  transition: 2s ease-out;
}

.bolimg:hover {
  background-image: url('http://i59.tinypic.com/k0szuv.jpg'); 
  height: 125%;
  width: 125%;
}

<div class="container">
  <div class="bolimg"></div>
</div>

Problem

I'm quite new to CSS and HTML and I want to create an image that zooms in fast when you hover. But the box radius zooms in as well. I know I'm doing something wrong with my div classes but I can't figure out what exactly. So I mean I want an effect like this: http://designshack.net/tutorialexamples/imagehovers/zoomandpan.html (the blonde girl one) This is the relevant code: ``` #circle { border: 4px solid; height:200px; width:200px; border-color: #000; border-radius: 100px; } .bolimg{ background: url('http://i60.tinypic.com/wb82e0.jpg') no-repeat; height:200px; width:200px; -webkit-border-radius: 100px; -webkit-transition: 2s ease-out; -moz-transition: 2s ease-out; -o-transition: 2s ease-out; -ms-transition: 2s ease-out; transition: 2s ease-out; } .bolimg:hover { opacity:1; background-image: url('http://i59.tinypic.com/k0szuv.jpg'); -webkit-transition: 2.5s ease-out; -moz-transition: 2.5s ease-out; -o-transition: 2.5s ease-out; -ms-transition: 2.5s ease-out; transition: 2.5s ease-out; -webkit-transform:scale(1.25); /* Safari and Chrome */ -moz-transform:scale(1.25); /* Firefox */ -ms-transform:scale(1.25); /* IE 9 */ -o-transform:scale(1.25); /* Opera */ transform:scale(1.25); } ``` and this is the body ``` <div id="circle" class="bolimg"> </div> </div> ``` Excuse my english it's very bad and I'm sorry if this is a stupid question. Thanks in advance.

Original source