#javascript #html #css
Как реализовать такие блоки на css? первая картинка обычное состояния, вторая - состояние
:hover на левый блок.
Ответы
Ответ 1
Действительно, интересная задача. Вот мое решение: Кодперо @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); }Ответ 2
парочка статей в помощь, а так - гуглите polygonal div https://stackoverflow.com/questions/30368404/how-to-create-a-polygon-shape-div https://sarasoueidan.com/blog/css-shapes/ для анимации ищите использование свойств transition\transformОтвет 3
Вот так можно примерно сделать: .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) }Document Если еще по колдовать с фоном и размытием думаю у Вас все получиться.
Комментариев нет:
Отправить комментарий