我想使用 CSS3 过渡给我的网页添加一些效果。基本上，我想让一个特定部分滑到另一个部分之上。
例如我有以下页面：
当我将鼠标悬停在如下部分的顶部时，我希望它看起来像下面这样：
这里使用的代码：
<div class="polar">
<div class="flt-sec-left">
<a href="index.html" class='left'>home</a>
<section>
<p> Our offers are the best on the city !! Check out our amazing activities !!! </p>
</section>
</div>
<div class="flt-sec-right">
<a href="_web/playa.html" class="inv">La Playa !</a>
<section class='inv'>
<p> One of the best in the world, if not the best, garanty !!! </p>
</section>
</div>
</div>
<div class="polar">
<div class="flt-sec-left">
<a href="_web/ciudad.html" >La Ciudad !</a>
<section>
<p> Feel what your granpa felt in his youth, back to the fifties baby !! </p>
</section>
</div>
<div class="flt-sec-right">
<a href="_web/excursion.html" class="inv">La Excursion !</a>
<section class='inv'>
<p> I thought pirate of the carabbean was all a hollywood set up. No ! We got it all wrong !! </p>
</section>
</div>
</div>
和CSS：
.polar
{
width:50%;
float:left;
}
.flt-sec-left
{
width:50%;
float:left;
}
.flt-sec-right
{
width:50%;
float:right;
}
.flt-sec-left:hover
{
z-index:1;
width:50%;
transition: width 2s;
}
.flt-sec-right:hover
{
position:absolute;
z-index:1;
width:50%;
transition: width 2s;
}
所以我希望我的主页部分滑到 la playa 部分的顶部（现在它只是推动它并迫使它在页面上下降）。
是否可以使用浮动技术（仅使用 CSS 和 HTML）来做到这一点。
谢谢。