There is such a block structure: enter image description here

How to implement, so that when you hover on the sides of a container with content, it is advanced and shows a hidden unit, moving aside?

enter image description here

    1 answer 1

    Without a code it is difficult to give a specific answer, for example, you can:

    * { box-sizing: border-box } .row { display: flex; flex-wrap: wrap; } .col { position: relative; width: 100%; min-height: 1px; border: 3px solid gold; transition: all .5s; } .col-1 { flex: 0 0 20%; } .col-2 { flex: 0 0 50%; } .col-3 { flex: 0 0 30%; } .col-1:hover { flex: 0 0 50%; } .col-1:hover+.col-2 { flex: 0 0 20%; } 
     <div class="row"> <div class="col col-1">Π‘ΠΎΠ΄Π΅Ρ€ΠΆΠΈΠΌΠΎΠ΅1</div> <div class="col col-2">Π‘ΠΎΠ΄Π΅Ρ€ΠΆΠΈΠΌΠΎΠ΅2</div> <div class="col col-3">Π‘ΠΎΠ΄Π΅Ρ€ΠΆΠΈΠΌΠΎΠ΅3</div> </div>

    • Thanks for the answer. And what if this is a slick slider and it uses centering? On mobile resolution, navigation elements are shown and works like a regular slider - Atomrr
    • Attach your sample code, what exactly do you want? What and why does not work? From the side, no problems can be seen, writing from scratch is unlikely to be here. Need source. - kizoso