It is necessary to make it so that when you hover the lower unit flies to the left of the upper block, and at the same time, the upper block flies to the right beyond the block borders. How to do this?

section { margin: 20px auto; padding: 20px; width: 240px; background-color: white; border: 1px solid #cccccc; } .title { height: 240px; width: 240px; text-align: center; box-sizing: border-box; font-size: 20px; font-weight: bold; color: #fff; background-color: #cccccc; padding-top: 100px; } .description { height: 240px; width: 240px; text-align: center; box-sizing: border-box; font-size: 16px; font-weight: bold; color: #fff; background-color: #333333; padding-top: 80px; } 
 <section class="works"> <a class="caption-link"> <div class="title">Продаем телефоны</div> <div class="description">Телефоны всех марок за доступной ценой и для любого метода оплаты.</div> </a> </section>

    1 answer 1

    First of all, you need to hide your second block on the left; this can be done through absolute positioning, i.e. set the position: relative parent and overflow: hidden to it so that they hide behind the border of our parent, and the block that needs to hide position: absolute , then when you hover on their parent, set one transform: translateX(-n) and the second transform: translateX(n) , well, so that it was smoothly add transition: all .4s ease .

    All the way you wanted?

     section { margin: 20px auto; padding: 20px; width: 240px; background-color: white; border: 1px solid #cccccc; } .title { height: 240px; width: 240px; text-align: center; box-sizing: border-box; font-size: 20px; font-weight: bold; color: #fff; background-color: #cccccc; padding-top: 100px; } .description { height: 240px; width: 240px; text-align: center; box-sizing: border-box; font-size: 16px; font-weight: bold; color: #fff; background-color: #333333; padding-top: 80px; } .caption-link { display: block; overflow: hidden; position: relative; } .title { transition: all .4s ease; } .description { position: absolute; top: 0; left: 0; transform: translateX(-100%); transition: all .4s ease; } .caption-link:hover .description { transform: translateX(0); transition: all .4s ease; } .caption-link:hover .title { transform: translateX(100%); transition: all .4s ease; } 
     <body> <section class="works"> <a class="caption-link"> <div class="title">Продаем телефоны</div> <div class="description">Телефоны всех марок за доступной ценой и для любого метода оплаты.</div> </a> </section> </body>

    • Thanks, yes as I wanted) - user324082