悬停时更改图像可移动图像

Question

我在这里有点问题。

我正在尝试在圆格div中显示图像（使用引导程序），即当鼠标悬停时，图片会变成gif，但是如果您将鼠标从图片上方移开，那只会是静态图片。

它几乎可以工作，因为它可以移动图片和框架，但我找不到原因。

这是http://jsfiddle.net/eve_mf/zmp7tnho/

<div class="container">
<div class="titleColumns col-md-24">
<h1>Meet Some Of <strong>Our Denison Experts</strong></h1>
<h2>We can have a line about the team</h2>
<div class="personPic col-md-6">
<div class="circleFrame"><img class="static img-circle alignleft wp-image-1008 size-full" src="http://motors06.denison-automotive.co.uk/denison/wp-content/uploads/2015/05/jules_sil5.png" alt="" width="120" height="120" />
<img class="animated img-circle alignleft wp-image-1008 size-full" src="http://motors06.denison-automotive.co.uk/denison/wp-content/themes/denison-automotive/images/jules_sil_gif.gif" alt="" width="120" height="120" /></div>
<span class="peopleName">Jules Perry</span>
<span class="peoplePos">The Thinker</span>

</div>
<div class="personPic col-md-6">
<div class="circleFrame"><img class="static img-circle alignleft wp-image-1012 size-full" src="http://motors06.denison-automotive.co.uk/denison/wp-content/uploads/2015/05/tessa_sil2.png" alt="" width="120" height="120" />
<img class="animated img-circle alignleft wp-image-1012 size-full" src="http://motors06.denison-automotive.co.uk/denison/wp-content/themes/denison-automotive/images/tessa_sil_gif.gif" alt="" width="120" height="120" /></div>
<span class="peopleName">Tessa Denison</span>
<span class="peoplePos">The Creative</span>
</div>

</div>
</div>

我正在使用html和CSS

有什么建议么？ 我尝试删除所有样式，但即使那样，图片之间也会有移动，并且大小相同。

谢谢你

Answer 1

实际上，您根本不需要设置职位。

.circleFrame:hover .animated {
    display:block;
}

http://jsfiddle.net/zmp7tnho/4/

Answer 2

我建议您也将边框样式设置为circleFrame - http://jsfiddle.net/d3z849y7/

它可以帮助您冻结边界。