如何在不丢失响应属性的情况下将css过渡效果应用于图像

Question

我正在尝试使用css向某些图像添加一些过渡效果，但是当它应用时，图像展开到所有是父容器并且不显示它之前的文本

这样的东西就是我的html：

<div id="people">
    <div class="col-md-3 col-sm-6">
        <div id="profilePic">
           <img class="img-responsive img-circle bottom" src="img/someone_old.png"> 
           <img class="img-responsive img-circle top" src="img/someone_now.png">
        </div>
        <h4>
            <strong>Someone</strong>
        </h4>
        <p>Description.</p>
    </div>
</div>

我正在使用bootstrap和其他css来实现转换效果以及响应

#people .img-responsive {
    margin: 0 auto
}

#profilePic img{
    position: absolute;
    left:0;
    -webkit-transition: opacity 1s ease-in-out;
    -moz-transition: opacity 1s ease-in-out;
    -o-transition: opacity 1s ease-in-out;
    transition: opacity 1s ease-in-out;
}

#profilePic img.top:hover{
    opacity: 0; 
}

此效果用于使鼠标与图像交互，一个在另一个的顶部，因此当鼠标悬停时，图像会自行交换。 事情是仅使用div profilePic容器，它们展开并使用全部为father div，涵盖标题及其下方的段落