Как лучше реализовать такие блоки?

Как реализовать такие блоки на css? первая картинка обычное состояния, вторая - состояние :hover на левый блок.

Ответ

Действительно, интересная задача. Вот мое решение:
Кодперо @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); }

Котики

Кролики