Here are few problems:
1. You have a wrapper div inside main-wrapper div, but its class is not declared in style declaration.
2. Your image class has width 154px but the container class(.wrapper:hover .hoverimage ) has width of 100px
3. You don't have border for main-wrapper, but on mouse over you are adding border. Obviously it will take space and move the contents. One workaround is to add a border to it and change its color on mouse over or set its border color to the color of background(may be white).
I changed your code and checked, it worked for me. You also try this. But keep in mind, I used my images. I don't know what is the height and width of your images so change height and width of div's as per your requirement.
<style type="text/css">
.image
{
position: relative;
width: 154px;
height: 200px;
float: right;
}
.hoverimage
{
position: absolute;
top: 120px;
left: 0;
display: none;
}
.wrapper
{
position: relative;
margin-left: 123px;
width: 160px;
float: left;
}
.main-wrapper:hover
{
border: 2px solid #7c97b4;
padding: 6px;
}
.main-wrapper
{
border-radius: 5px, 5px, 5px, 5px;
float: left;
height: auto;
margin-right: 1px !important;
padding: 6px;
position: absolute;
border: 2px solid Gray;
}
</style>
<form id="form1" runat="server">
<div class="main-wrapper">
<div class="wrapper">
<div class="image">
<img src="images/template10.jpg" alt="" />
<a href="Default.aspx">
<img class="hoverimage" src="images/check48.png" alt="" /></a>
</div>
</div>
</div>
</form>