How to implement such blocks on css? the first picture is the normal state, the second is the: hover state on the left block. enter image description here

enter image description here

  • one
    I advise you to dig in the direction of transform , namely, when you hover one block to reduce x, the other to increase. The button (a link for each block of its own) can be absolutely positioned with displey: none and show when hovering. In a strip of text, use several spans ....... There are a lot of options - pepel_xD
  • one
    jsfiddle.net/soledar10/j2tku1rz - soledar10
  • describe the task in more detail, please. I understand correctly, when you hover on a link, increase the width, remove the background blur and show the button? - malginovdesign
  • Yes, with a hover on a specific block (left or right) it β€œopens”, a button is shown and the background blur is removed. The problem when creating a block of just such a form + guidance should work only on this block, given the diagonal cut - aidos1807

3 answers 3

Indeed, an interesting task. Here is my solution:

Kodpero

 @import url(https://fonts.googleapis.com/css?family=Roboto:100&subset=cyrillic,latin); body { font: 36px/1'Roboto', sans-serif; } a { text-decoration: none; text-transform: uppercase; z-index: 3; } img { width: 130%; height: auto; position: relative; -webkit-filter: blur(10px); -moz-filter: blur(10px); filter: blur(10px); object-fit: fill; } * { box-sizing: border-box; padding: 0; margin: 0; transition: all .3s; } .container a { position: absolute; height: 300px; } a.block-left { width: 65%; -webkit-clip-path: polygon(0% 100%, 0% 0%, 100% 0%, 55% 100%); -moz-clip-path: polygon(0% 100%, 0% 0%, 100% 0%, 55% 100%); -ms-clip-path: polygon(0% 100%, 0% 0%, 100% 0%, 55% 100%); clip-path: polygon(0% 100%, 0% 0%, 100% 0%, 55% 100%); left: 0; } a.block-right { width: 65%; -webkit-clip-path: polygon(0% 100%, 45% 0%, 100% 0%, 100% 100%); -moz-clip-path: polygon(0% 100%, 0% 0%, 100% 0%, 55% 100%); -ms-clip-path: polygon(0% 100%, 0% 0%, 100% 0%, 55% 100%); clip-path: polygon(0% 100%, 0% 0%, 100% 0%, 55% 100%); right: 0; } .block-left-div { position: absolute; overflow: hidden; top: 0; left: 0; height: 300px; width: 65%; -webkit-clip-path: polygon(0% 100%, 0% 0%, 100% 0%, 55% 100%); -moz-clip-path: polygon(0% 100%, 0% 0%, 100% 0%, 55% 100%); -ms-clip-path: polygon(0% 100%, 0% 0%, 100% 0%, 55% 100%); clip-path: polygon(0% 100%, 0% 0%, 100% 0%, 55% 100%); } p.block-left { width: 50%; position: absolute; top: 110px; left: 0; color: #fafafa; z-index: 2; text-align: center; line-height: 70px; background: rgba(0, 0, 0, 0.7); } .block-left-div img { right: 10%; } .block-right-div { position: absolute; overflow: hidden; top: 0; right: 0; height: 300px; width: 65%; -webkit-clip-path: polygon(0% 100%, 45% 0%, 100% 0%, 100% 100%); -moz-clip-path: polygon(0% 100%, 0% 0%, 100% 0%, 55% 100%); -ms-clip-path: polygon(0% 100%, 0% 0%, 100% 0%, 55% 100%); clip-path: polygon(0% 100%, 0% 0%, 100% 0%, 55% 100%); } p.block-right { width: 50%; position: absolute; top: 110px; right: 0; z-index: 2; color: #fafafa; text-align: center; line-height: 70px; background: rgba(0, 0, 0, 0.7); } .block-right-div img { right: 10%; } /* hover */ a.block-left:hover ~ p.block-left { width: 75%; } a.block-left:hover, a.block-left:hover ~ .block-left-div { width: 75%; -webkit-clip-path: polygon(0% 100%, 0% 0%, 100% 0%, 65% 100%); -moz-clip-path: polygon(0% 100%, 0% 0%, 100% 0%, 65% 100%); -ms-clip-path: polygon(0% 100%, 0% 0%, 100% 0%, 65% 100%); clip-path: polygon(0% 100%, 0% 0%, 100% 0%, 65% 100%); } a.block-left:hover ~ .block-right-div { width: 55%; -webkit-clip-path: polygon(0% 100%, 54% 0%, 100% 0%, 100% 100%); -moz-clip-path: polygon(0% 100%, 54% 0%, 100% 0%, 100% 100%); -ms-clip-path: polygon(0% 100%, 54% 0%, 100% 0%, 100% 100%); clip-path: polygon(0% 100%, 54% 0%, 100% 0%, 100% 100%); } a.block-left:hover ~ p.block-right { width: 25%; } a.block-left:hover ~ .block-left-div img { -webkit-filter: blur(0); -moz-filter: blur(0); filter: blur(0); } a.block-left:hover ~ p.block-left:after { content: 'ΠΏΠΎΠ΄Ρ€ΠΎΠ±Π½Π΅Π΅ ΠΎ ΠΊΠΎΡ‚ΠΈΠΊΠ°Ρ…...'; font-size: 20px; line-height: 40px; position: absolute; top: 100px; left: 33%; padding: 0 20px; border-radius: 3px; background: rgba(0, 0, 0, 0.7); } a.block-right:hover ~ p.block-right { width: 75%; } a.block-right:hover ~ .block-left-div { width: 55%; -webkit-clip-path: polygon(0% 100%, 0% 0%, 100% 0%, 45% 100%); -moz-clip-path: polygon(0% 100%, 0% 0%, 100% 0%, 45% 100%); -ms-clip-path: polygon(0% 100%, 0% 0%, 100% 0%, 45% 100%); clip-path: polygon(0% 100%, 0% 0%, 100% 0%, 45% 100%); } a.block-right:hover ~ .block-right-div { width: 76%; -webkit-clip-path: polygon(0% 100%, 40% 0%, 100% 0%, 100% 100%); -moz-clip-path: polygon(0% 100%, 40% 0%, 100% 0%, 100% 100%); -ms-clip-path: polygon(0% 100%, 40% 0%, 100% 0%, 100% 100%); clip-path: polygon(0% 100%, 40% 0%, 100% 0%, 100% 100%); } a.block-right:hover ~ p.block-left { width: 25%; } a.block-right:hover ~ .block-right-div img { -webkit-filter: blur(0); -moz-filter: blur(0); filter: blur(0); bottom: 50%; } a.block-right:hover ~ p.block-right:after { content: 'ΠΏΠΎΠ΄Ρ€ΠΎΠ±Π½Π΅Π΅ ΠΎ ΠΊΡ€ΠΎΠ»ΠΈΠΊΠ°Ρ…...'; font-size: 20px; line-height: 40px; position: absolute; top: 100px; right: 33%; padding: 0 20px; border-radius: 3px; background: rgba(0, 0, 0, 0.7); } 
 <body> <div class="container"> <a href="#" class="block-left"></a> <a href="##" class="block-right"></a> <p class="block-left">ΠšΠΎΡ‚ΠΈΠΊΠΈ</p> <p class="block-right">ΠšΡ€ΠΎΠ»ΠΈΠΊΠΈ</p> <div class="block-left-div"> <img src="http://www.velvet.by/files/userfiles/19083/ekrk.jpg" /> </div> <div class="block-right-div"> <img src="http://katyaburg.ru/sites/default/files/pictures/zabavnie_jivotnie/kroliki_kartinki_foto_03.jpg" /> </div> </div> </body>

    a couple of articles to help, as well - google polygonal div https://stackoverflow.com/questions/30368404/how-to-create-a-polygon-shape-div https://sarasoueidan.com/blog/css-shapes/ For animation, look for using transition \ transform properties.

    • Please try to publish detailed answers containing a specific example of the minimum solution, supplementing them with a link to the source. Answers –references (like comments) do not add knowledge to Runet. - Nicolas Chabanovsky ♦

    So you can do something like this:

     .wrapper { width: 700px; height: 200px; position: relative; margin: 50px auto; outline: 1px solid red; overflow: hidden; } .text { display: block; height: 40px; background-color: rgba(0, 0, 0, .7); position: absolute; top: 40px; right: 0; left: 0; z-index: 3; } .left-text { line-height: 40px; color: white; float: left; padding-left: 200px; } .right-text { line-height: 40px; color: white; float: right; padding-right: 200px; } .blok1 { width:100%; height: 100%; background: red; position: absolute; transform: skewX(-40deg) translateX(-50%); transition: all .5s ease; } .blok2 { width: 100%; height: 100%; background: blue; position: absolute; transform: skewX(-40deg) translateX(50%); transition: all .5s ease; } .blok2:hover{ transform: skewX(-40deg) translateX(30%); } .blok2:hover .link2 { display: block; left: 100px; } .blok1:hover { transform: skewX(-40deg) translateX(-40%); z-index: 2 } .blok1:hover .link1{ display: block; right: 100px; } .link { display: none; height: 40px; background: lightpink; text-align: center; line-height: 40px; padding: 0 10px; text-decoration: none; color: lightslategray; position: fixed; bottom: 50px; z-index: 3; transform: skewX(40deg) } 
     <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="wrapper"> <span class="text"> <span class="left-text">тСкст</span> <span class="right-text">тСкст</span> </span> <div class="blok1"> <a href="#" class="link link1">ΠΏΠΎΠ΄Ρ€ΠΎΠ±Π½Π΅Π΅</a> </div> <div class="blok2"> <a href="#" class="link link2">ΠΏΠΎΠ΄Ρ€ΠΎΠ±Π½Π΅Π΅</a> </div> </div> </body> </html>

    If you still conjure with the background and blur, I think you will succeed.