<!DOCTYPE html>
<html>
  <head>
  <title>Quick Card Hover Effects</title>
  <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <div class="container">
      <div class="card">
        <div>
          <h2>Design</h2>
          <p>Some text about this card. Suggest there is more to see.
          </p>
          <a href="#">More Design</a>
        </div>
      </div>
      <div class="card">
        <div>
          <h2>Code</h2>
          <p>Some text about this card. Suggest there is more to see.
          </p>
          <a href="#">More Code</a>
        </div>
      </div>
      <div class="card">
        <div>
          <h2>Launch</h2>
          <p>Some text about this card. Suggest there is more to see.
          </p>
          <a href="#">More Launch</a>
        </div>
      </div>
    </div>
  </body>
</html>
@import url("https://fonts.googleapis.com/css?family=Roboto:400,400i,700");

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

body {
  font-family: Roboto, sans-serif;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}

.container {
  width: 1050px;
  display: flex;
  justify-content: space-between;
}

.container .card {
  position: relative;
  width: 300px;
  padding: 40px;
  box-shadow: 0 10px 30px rgba(0,0,0,.1);
  overflow: hidden;
}

.container .card::before {
  content: '';
  position: absolute;
  left: 0;
  bottom: calc(-100% + 4px);
  width: 100%;
  height: 100%;
  background: #000;
  z-index: 1;
  transition: .3s ease-in-out;
}

.container .card:hover::before {
  bottom: 0;
}
.container .card:nth-child(1)::before {
  background: #ff56ac;
}
.container .card:nth-child(2)::before {
  background: #1bcaff;
}
.container .card:nth-child(3)::before {
  background: #e33cff;
}

.container .card div {
  position: relative;
  z-index: 2;
}

.container .card div h2 {
  margin-bottom: 10px;
  font-size: 30px;
  transition: .3s;
  color: #777;
}

.container .card div p {
  font-size: 18px;
  transition: .3s;
  color: #777;
}

.container .card div a {
  margin-top: 20px;
  font-size: 14px;
  display: inline-block;
  text-decoration: none;
  transition: .3s;
  background: #fff;
  color: #777;
  padding: 6px 10px;
  font-weight: bold;
  box-shadow: 0 2px 20px rgba(0,0,0,.5);
}

.container .card:hover div h2, .container .card:hover div p {
  color: #fff;
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.