Css Hover effect bugged?

Question

When i hover my mouse over on my class first images it is affecting my class second images, How do i fix this?

    .body{margin:0 auto;width:100%;clear:both;}
    .topPart{background-color:#7FFFD4;height:220px;width:1264px;margin:0px 0px 0px 0px;overflow: visible;}
    .topPart ul li  {position: relative;list-style:none;float:left;display:inline;}
     .imgOne{height: 120px;width: 120px;border-radius:60px; border-style:solid;border-color:white;margin:-25px 30px 0px -5px;position: relative;}
     .imgOne:hover{border-radius:5%;height:130px;}
     .imgTwo{height: 120px;width: 120px;border-radius:60px;border-style:solid;border-color:white;position: relative;}

    <div><div class="topPart"><h2><a href="#">Top</a></h2>
      <ul class="first">
        <li><a href="#"><img class="imgOne" src="img/3.gif"></a></li>
        <li><a href="#"><img class="imgOne" src="img/2.gif"></a></li>
        <li><a href="#"><img class="imgOne" src="img/4.gif"></a></li>
        <li><a href="#"><img class="imgOne" src="img/5.gif"></a></li>
        <li><a href="#"><img class="imgOne" src="img/6.gif"></a></li>
        <li><a href="#"><img class="imgOne" src="img/17.gif"></a></li>
        <li><a href="#"><img class="imgOne" src="img/18.gif"></a></li>
        <li><a href="#"><img class="imgOne" src="img/19.gif"></a></li></ul>
      <ul class="second">
        <li ><a href="#"><img class="imgTwo" src="img/11.gif"></a></li>
        <li><a href="#"><img class="imgTwo" src="img/12.gif"></a></ul></li></div></div>

Answer 1

Try this one

Please Change Your height:130px to height:120px

 .body{margin:0 auto;width:100%;clear:both;}
    .topPart{background-color:#7FFFD4;height:220px;width:1264px;margin:0px 0px 0px 0px;overflow: visible;}
    .topPart ul li  {position: relative;list-style:none;float:left;display:inline;}
     .imgOne{height: 120px;width: 120px;border-radius:60px; border-style:solid;border-color:white;margin:-25px 30px 0px -5px;position: relative;}
     .imgOne:hover{border-radius:5%;height: 120px;}
     .imgTwo{height: 120px;width: 120px;border-radius:60px;border-style:solid;border-color:white;position: relative;}

Updated Demo

Answer 2

When hovering the height is changing from 120px to 130px that's why it affecting others

.body {
  margin: 0 auto;
  width: 100%;
  clear: both;
}
.topPart {
  background-color: #7FFFD4;
  height: 220px;
  width: 1264px;
  margin: 0px 0px 0px 0px;
  overflow: visible;
}
.topPart ul li {
  position: relative;
  list-style: none;
  float: left;
  display: inline;
}
.imgOne {
  height: 120px;
  width: 120px;
  border-radius: 60px;
  border-style: solid;
  border-color: white;
  margin: -25px 30px 0px -5px;
  position: relative;
}
.imgOne:hover {
  border-radius: 5%;
  height: 120px;
}
.imgTwo {
  height: 120px;
  width: 120px;
  border-radius: 60px;
  border-style: solid;
  border-color: white;
  position: relative;
}

<div>
  <div class="topPart">
    <h2><a href="#">Top</a></h2>
    <ul class="first">
      <li>
        <a href="#">
          <img class="imgOne" src="img/3.gif">
        </a>
      </li>
      <li>
        <a href="#">
          <img class="imgOne" src="img/2.gif">
        </a>
      </li>
      <li>
        <a href="#">
          <img class="imgOne" src="img/4.gif">
        </a>
      </li>
      <li>
        <a href="#">
          <img class="imgOne" src="img/5.gif">
        </a>
      </li>
      <li>
        <a href="#">
          <img class="imgOne" src="img/6.gif">
        </a>
      </li>
      <li>
        <a href="#">
          <img class="imgOne" src="img/17.gif">
        </a>
      </li>
      <li>
        <a href="#">
          <img class="imgOne" src="img/18.gif">
        </a>
      </li>
      <li>
        <a href="#">
          <img class="imgOne" src="img/19.gif">
        </a>
      </li>
    </ul>
    <ul class="second">
      <li>
        <a href="#">
          <img class="imgTwo" src="img/11.gif">
        </a>
      </li>
      <li>
        <a href="#">
          <img class="imgTwo" src="img/12.gif">
        </a>
    </ul>
    </li>
  </div>
</div>