1. Tutorials
  2. CSS
  3. Open Card on Hover

Open Card on Hover

In this tutorial, you will learn how to slightly open a card on hover with CSS. Watch the video below for a detailed tutorial.

HTML

<div class="container">
    <div class="cover"></div>
    <div class="cover"></div>
  </div>

CSS

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);
}