我想改变两个div的位置时悬停在一个div。在下面的代码中，当我悬停在.img div上时，我想移动顶部的.title div（位置例如top:50px)，并在其下方显示最初设置为隐藏的.info div。

我正在尝试跟随代码，但似乎不工作的悬停。我将感谢任何帮助。

HTML：

<div class="box">
    <div class="img"><img src="http://i281.photobucket.com/albums/kk240/leahhaudrey/bubbles.jpg" /></div>
    <div class="title">Lorem ipsum dolor sit amet</div>
    <div class="info">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam imperdiet velit nec turpis tempus vehicula. Integer congue feugiat eros ac interdum. </div>

</div>

CSS：

img{
    display: block;
}

.title,
.info{
    background: white;
}

.box{
    position: relative;
    display: inline-block;
}

.title{
    position: absolute;
    bottom: 10px;
}

.info{
    display: none;
    position: absolute;
    bottom: 10px;
}

.img{
    background: red;
}

.img:hover{
    opacity: 0.4;    
}

.img:hover .info{
    display: block;
}

演示。http://jsfidle.net/upwv3/