There was such a question (Google itself, but I can not even think of how to call it)

It is necessary to make it so that when you click on the picture it is divided in half and the text in the frame appears from the center (you can see an example in the picture) enter image description here

  • You can set the two blocks above each other, the same photo as the background, selecting the desired background-position . Place an invisible block with text between these blocks. - Pyramidhead
  • as an option, but I was sure that I could be using 1 block to achieve this - Rovshan Agaev

2 answers 2

 var bool = true $('.image').click(function() { if (bool) { $('.block').animate({ opacity: '1', height: '90' }, 500) $('#m').animate({ top: "+=90px" }, 500) bool = false } else { $('.block').animate({ opacity: '0', height: '0' }, 500) $('#m').animate({ top: "-=90px" }, 500) bool = true } }) 
 .image { position: absolute; top: 0; left: 0; height: 450px; width: 100%; background: url('http://lepser.ru/wp-content/uploads/2011/08/osnovy-kompozicii-v-fotografii-big-03.jpg'); } .block { opacity: 0; position: absolute; top: 450px; left: 0; z-index: 6; width: 100%; height: 0px; background-color: #ccc; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="image" style="z-index:4;"></div> <div class="block">ВСкст</div> <div class="image" id="m" style="z-index:5;top:450px;background-position:0px 450px"></div>

    I did on hover , not on click . But this can be altered to click with the help of JavaScript, applying the same styles to click as in my hover pseudo-classes.

    For hover this can be done in pure CSS using a single element.
    Let's say the image size is 200x200:

     *, *:before, *:after { box-sizing: border-box; } .image-popup, .image-popup:before, .image-popup:after { transition: all 0.75s ease; } .image-popup { width: 200px; text-align: center; margin-top: 100px; position: relative; /* ΠŸΡ€ΡΡ‡Π΅ΠΌ элСмСнт */ border: 0; padding: 0; height: 0; font-size: 0; } .image-popup:before, .image-popup:after { content: ""; width: 200px; height: 100px; /* Половина высоты изобраТСния */ position: absolute; left: -5px; /* Π’Π΅Π»ΠΈΡ‡ΠΈΠ½Π° border исходного изобраТСния */ background: url("https://i.stack.imgur.com/MmtZb.jpg") no-repeat; } .image-popup:before { top: 0; transform: translateY(-100%); /* ΠŸΠΎΠΌΠ΅Ρ‰Π°Π΅ΠΌ ΠΏΠΎΠ»-ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠΈ Π½Π°Π΄ элСмСнтом */ } .image-popup:after { bottom: 0; transform: translateY(100%); /* ΠŸΠΎΠΌΠ΅Ρ‰Π°Π΅ΠΌ ΠΏΠΎΠ»-ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠΈ ΠΏΠΎΠ΄ элСмСнтом */ background-position: 0 100%; /* ΠžΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°Π΅ΠΌ ниТнюю ΠΏΠΎΠ»ΠΎΠ²ΠΈΠ½Ρƒ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½Ρ‹ */ } /* Π’Π΅ΠΏΠ΅Ρ€ΡŒ Π΄Π΅Π»Π°Π΅ΠΌ элСмСнт Π²ΠΈΠ΄ΠΈΠΌΡ‹ΠΌ, установливая border, padding, heigth, font-size */ .image-popup:hover { border: 5px solid lime; padding: 20px; height: auto; font-size: 16px; } /* Π‘Ρ‚ΠΈΠ»ΠΈ Ссли Π΅ΡΡ‚ΡŒ Π³Ρ€Π°Π½ΠΈΡ†Ρ‹ (border) */ .image-popup:hover:before { top: -5px; } .image-popup:hover:after { bottom:-5px; } 
     <div class="image-popup"> WHO WE ARE </div>

    • it would be good to add a transition - G. Denis
    • @G.Denis you are right, so more smooth transition. Added by. - Vadim Ovchinnikov
    • @ Vadim Ovchinnikov Great solution! Original looks. There is no limit to perfection - to remove twitching when the cursor leaves the picture before the end of the animation. In other words, prohibit re-animation until the first animation on the hover has ended. - Alexandr_TT
    • @Alexandr_T Thank you for your attention and criticism. Look now, I hope corrected. - Vadim Ovchinnikov
    • @ Vadim Ovchinnikov Great! Better, probably impossible to do. - Alexandr_TT