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

Question

我这里有点问题。

我试图在圆圈中显示图像 div（使用 bootstrap），当鼠标悬停时，图片变成 gif，但是如果你将鼠标从图片上移开, 它只是一个静态图像。

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

<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

有什么建议吗？我试图删除所有样式，但即便如此，图片之间还是有移动并且大小相同..

谢谢你uuu

Answer 1

其实根本不需要设置位置

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

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

Answer 2

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

它可以帮助您冻结边界。

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

change image on hover moves images

css

image

hover