CSS转换在以下内容上发送Div：悬停退出

当用户将鼠标悬停在

项上时，css转换工作正常，但是当鼠标退出
div
时，内容在转换过程中被推到下方。下面是我的html/css以及一个JSFIDLE来说明我的意思

html:


我确信这是一个简单的
位置问题。但是，我对
转换
不够熟悉，不知道在哪里可以找到答案

更新了
位置
至

tranform: translateY(-100%);

为了摆脱非过渡性质。现在在
之前/之后：悬停
将
div
标题
推到
项下
。更新了JSFIDLE以显示

更新了
过渡：所有
到
过渡：宽度
在
img
和
标题
上，固定了
标题
在
上被推到
img
下方：悬停
，然而，当用户退出
：hover
时，将
标题推到下方的原始问题仍然是一个问题。
我想我找到了答案：

通过使
标题
具有
位置：绝对
，我可以强制它停留在
项
div
的内部，防止它在下方移动。所以我更新的css（带有实际的
类
名称和产品名称）看起来像

.flight {
    height: 400px;
    position: relative;

}

.flight-img {
    background: red;
    background-size: cover;
    width: 40%;
    height: 400px;
    float: left;
    position: relative;

    /* CSS Animation Effects */
    transition: width 0.5s ease;

}


.flight-heading {
    width: 60%;
    float: left;
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);

    transition: width 0.5s ease;
}

/* Alternate img float ***
/* Probably an easier way but this works for now */
.flight:nth-of-type(4n-1) .flight-img{
float: right;
}
.flight:nth-of-type(4n-3) .flight-img{
    float: left;
}
.flight:nth-of-type(4n-1) .flight-heading{
    left:0;
}
.flight:nth-of-type(4n-3) .flight-heading{
    float: right;
}

/* Adding hover effects for desktop */

.flight:hover .flight-img {
    width: 100%;
}

.flight:hover .flight-heading {
    width: 100%;
    position:absolute;
    top:0;
    left:0;
    transform: translateY(50%);
    background: rgba(0,0,0,0.75);
    color: #fff;

    h2 {
        color: #fff;
    }
}

虽然我的html看起来像：

<div id="flights">
    <div class="flight">
        <div class="flight-img"></div>
        <div class="flight-heading">
            <h2>Shared Flights</h2>
            <p>The shared flight option is available for 1 to 5 people. This is our most economical flight. You will fly with other passengers that are booked that day.</p>
            <button>Book Now</button>
        </div>
    </div>
    <div class="clear"></div>

</div><!-- End Flights -->


共享航班
共享航班选项可供1至5人使用。这是我们最经济的航班。您将与当天预订的其他乘客一起乘坐飞机

现在预订

带着一张要展示的照片。我知道动画需要处理，但我想现在将
div
放在一个地方就很容易了。
你想在退出div时也进行转换吗？…但是要放在那个位置而不是下面？@Phani，我希望它转换回40/60分割，而不移动到
项
分区之外。基本上，我希望相反的反应是：当它们退出分区时悬停。你不能转换
位置
…嘿，这很押韵！
.flight {
    height: 400px;
    position: relative;

}

.flight-img {
    background: red;
    background-size: cover;
    width: 40%;
    height: 400px;
    float: left;
    position: relative;

    /* CSS Animation Effects */
    transition: width 0.5s ease;

}


.flight-heading {
    width: 60%;
    float: left;
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);

    transition: width 0.5s ease;
}

/* Alternate img float ***
/* Probably an easier way but this works for now */
.flight:nth-of-type(4n-1) .flight-img{
float: right;
}
.flight:nth-of-type(4n-3) .flight-img{
    float: left;
}
.flight:nth-of-type(4n-1) .flight-heading{
    left:0;
}
.flight:nth-of-type(4n-3) .flight-heading{
    float: right;
}

/* Adding hover effects for desktop */

.flight:hover .flight-img {
    width: 100%;
}

.flight:hover .flight-heading {
    width: 100%;
    position:absolute;
    top:0;
    left:0;
    transform: translateY(50%);
    background: rgba(0,0,0,0.75);
    color: #fff;

    h2 {
        color: #fff;
    }
}

<div id="flights">
    <div class="flight">
        <div class="flight-img"></div>
        <div class="flight-heading">
            <h2>Shared Flights</h2>
            <p>The shared flight option is available for 1 to 5 people. This is our most economical flight. You will fly with other passengers that are booked that day.</p>
            <button>Book Now</button>
        </div>
    </div>
    <div class="clear"></div>

</div><!-- End Flights -->