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

Question

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.

Solution 1

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>

Solution 2

you need to add an overflow: hidden; style to the #circle element and make the .bolimg a nested <div>. See snippet:

#circle {
    border: 4px solid;
height:200px;
width:200px;
    border-color: #000;
    border-radius: 100px;
    overflow:hidden;
    }



.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);


}

<div id="circle"> 
    <div class="bolimg"></div>
</div>

Looks cool in Firefox but Chrome does some ugly transitions -.-

Comments

[azaela]

That's amazing! Thank you so much it totally worked! Sigh, I still have a long way to go...

[Rick Hitchcock]

I've been programming for 35 years, and I still learn something new everyday. : )

[lyhong]

Can we make it zoom from the center?

[Rick Hitchcock]

@lyhong, you can animate negative margin-left and negative margin-top as half the increase of the height and width. In this case, add these properties to .bolimg:hover: margin-left: -12.5%; margin-top: -12.5%; See jsfiddle.net/ordp6x7j

[Anthony]

I've been coding for a long time now, CSS is tricky as hell