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

Question

我在这里遇到了一些问题。

我正在尝试在圆形div（使用引导程序）中显示图像，当悬停时，图片变为gif，但如果从图片上方抓取鼠标，则只是静态图像。

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

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

    BasicDBObject matchSurvey = new BasicDBObject();
    matchSurvey.put("$match", new BasicDBObject("json.surveyRefId", new BasicDBObject("$in", new Integer[]{377,360})));
    BasicDBObject unwind = new BasicDBObject();
    unwind.put("$unwind", "$json.questionsVoList");
    BasicDBObject matchQuestion = new BasicDBObject();
    matchQuestion.put("$match", new BasicDBObject("json.questionsVoList.questionType", "hard"));
    HashMap map = new HashMap();
    map.put("_id", "$_id");
    map.put("questionsVoList", new BasicDBObject("$push", "$json.questionsVoList"));
    BasicDBObject group = new BasicDBObject();
    group.put("$group",map);        
    List<BasicDBObject> list = new ArrayList<BasicDBObject>();
    list.add(matchSurvey);
    list.add(unwind);
    list.add(matchQuestion);
    list.add(group);
    AggregateIterable output = collection.aggregate(list, DBObject.class);

我正在使用html和css

有什么建议吗？我试图删除所有样式，但即便如此，图片之间还是有相同的尺寸运动..

谢谢youuuu

Answer 1

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

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

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

Answer 2

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

它可以帮助你冻结边界。