How to stop element moving when its border-radius changes?

Question

So I've just got this small extract of code which I want to go ahead and add some more effects too. At the moment though, the problem I'm having is that when the border-radius changes (from 0 to 5px), then the image jumps down and to the right, so not really getting the smooth transition I'm looking for. Here is the code:

<div id="rolloverImageWrapper">
<img src="http://oi60.tinypic.com/2ngartv.jpg" class="rolloverImages" id="rolloverImage_1"/>
</div>

.rolloverImages{
   position: absolute;
   top: 150px;
   -webkit-transition: border-radius 1s; /* Safari */
   transition: border-radius 1s;
}

#rolloverImage_1{
   margin-left: 450px;
}

#rolloverImage_1:hover{
   border:5px solid #FE9505;
   border-bottom:0px solid white;
}

.rolloverImages:hover{
   border-radius:90px;
}


#rolloverImageWrapper{

}

Anyway, thanks in advance for the answers guys :)

Answer 1

It is the border that is causing the issue you are seeing. I was able to combat this problem using a padding in the initial .rolloverImage class, and then removing the padding in the hover.

.rolloverImages{
    position: absolute;
    top: 150px;
    -webkit-transition: border-radius 1s; /* Safari */
    transition: border-radius 1s;
    padding: 5px 5px 5px 5px;
}

.rolloverImages:hover{
   border-radius:90px;
   padding: 0px 0px 0px 0px;
}