body, html { margin: 0; padding: 0; height: 100%; overflow: hidden } body { background: url(star-catcher-astronaut-catching-stars-for-research-astronaut.jpg) no-repeat center; background-size: cover; width: 200% } input#menu-control { display: none } div.menu-container { display: block; position: relative; float: left; top: 0; left: 0; height: 100%; width: 0; box-sizing: border-box; padding-top: 50px; transition: all .5s ease; overflow: hidden } div.menu-container ul { position: relative; padding: 0; margin: 0; top: 30%; transform: translateY(-50%) } div.menu-container ul li { list-style: none; text-align: center; white-space: nowrap } div.menu-container ul li a { text-decoration: none; color: #fff; display: block; padding: 8px 0 0; transition: all .5s ease; font-size: 24px; height: 40px } div.menu-container ul li a:hover { background-color: rgba(255, 0, 0, .5) } div.menu-container ul>li+li:before { content: ''; display: block; height: 1px; margin: 2px 2px } label[for=menu-control] { display: block; position: fixed; top: 0; left: 0; width: 50px; height: 30px; cursor: pointer } div.menu-button span { width: 44px; height: 3px; background-color: #ccc; display: block; margin: 5px 0 0 3px } div.content-border { width: 50%; height: 100%; float: left; box-sizing: border-box; padding: 50px 50px 25px; overflow-y: scroll } div.content { min-height: 200px; max-width: 800px; background-color: #fff; border-radius: 15px; opacity: .5; transition: opacity .5s ease,transform .5s ease; cursor: pointer; padding: 15px; margin-bottom: 25px } div.content:hover { opacity: 1; } @media screen and (max-width:700px) { input#menu-control:checked+div.menu-container { width: 50%; left: 0 } } @media screen and (min-width:700px) { input#menu-control:checked+div.menu-container { width: 350px; left: 0 } div.content { margin-left:auto; margin-right:auto } div.content:hover { transform:scale(1.05) } } *{ -webkit-tap-highlight-color: transparent }