在鼠标悬停上显示图像中心上的图标字体

Answer 1

如果我理解你的问题，我会使用CSS3过渡。在这个例子中，我只是用你的图标字体替换font-family（假设它是如何工作的 - 从未使用它）。

h2 {
    position: aboslute;
    margin-top: -350px;
    display: none;
    text-align: center;
    font-family: arial;
}
#loop-news:hover h2 {
    display: block;
}
#loop-news:hover img {
    opacity: .5;
}
img, h2 {
    -webkit-transition: all .8s ease;
    -moz-transition: all .8s ease;
    -ms-transition: all .8s ease;
    -o-transition: all .8s ease;
    transition: all .8s ease;
}

JS Fiddle