更改懸停圖像移動圖像

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

任何建議的工作？我試圖消除所有的款式，但是即使是這樣，有圖片之間的運動和大小都一樣..

謝謝youuuu

Answer 1

其實，你並不需要設置一個位置所有。

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

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

Answer 2

，我建議你到邊框樣式設置爲circleFrame太 - http://jsfiddle.net/d3z849y7/

它可以幫助你凍結的邊界。