css - 在悬停时更改图像移动图像

Question

我这里有点问题。

我试图在一个圆形 div 中显示一个图像(使用 bootstrap)，当悬停时，图片变成 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/