html - CSSを使用して、Webページでセクションを他のセクションの上に「スライド」させることは可能ですか?

Question

CSS3 トランジションを使用して、Web ページに効果を追加したいと考えています。基本的に、特定のセクションを別のセクションの上にスライドさせたいと思っています。

たとえば、次のページがあります。

そして、次のようなセクションの上にカーソルを合わせると、次のようになります。

ここで使用されるコード：

                <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;
}

だから私はホームセクションをラプラヤセクションの上にスライドさせたいと思っています（今はそれを押してページ上で強制的に下に移動させています）。

フローティング技術 (CSS と HTML を使用するだけ) を使用してそれを行うことは可能ですか?

ありがとう。