懸停時更改圖像可移動圖像

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/

它可以幫助您凍結邊界。