In this tutorial, you will learn how to slightly open a card on hover with CSS. Watch the video below for a detailed tutorial.
<div class="container"> <div class="cover"></div> <div class="cover"></div> </div>
body { background: #2e3537; margin: 0; padding: 1em; height: 100vh; display: flex; align-items: center; justify-content: center; } .container { background-color: white; position: relative; width: 600px; height: 300px; display: grid; grid-template-columns: 1fr 1fr; } .cover { width: 100%; height: 100%; cursor: pointer; transform-style: preserve-3d; transform-origin: right; transition: all 0.5s ease-in-out; } .cover:first-child { background-color: #0380a7; } .cover:last-child { background-color: #a3c3e6; background-image: url('logo.png'); background-repeat: no-repeat; background-position: center; } .cover:hover { transform: perspective(1200px) translateX(0px) rotateY(-10deg); }