Tile with cover

by Saksham Malhotra

HTML

<div class="tile teams">
  <div class="image">
  </div>
  <div class="cover">
  </div>
  <div class="heading">Microsoft Teams</div>
  <p>Collaborate within the team</p>
  <p>To build complex workflows and automate the process</p>
  <p>Manage content protected with different access levels</p>
  <p>Again collaborate within the team effectively</p>
</div>

<div class="tile sharefile">
  <div class="image">
  </div>
  <div class="cover">
  </div>
  <div class="heading">ShareFile</div>
  <p>Collaborate within the team</p>
  <p>To build complex workflows and automate the process</p>
  <p>Manage content protected with different access levels</p>
  <p>Again collaborate within the team effectively</p>
</div>

CSS

.tile {
  background-color: #dfe6e9;
  position: relative;
  height: 250px;
  width: 500px;
  font-family: Segoe UI, SegoeUI, "Helvetica Neue", Helvetica, Arial, sans-serif;
  cursor: pointer;
  overflow: hidden;
  display: inline-block;
  margin: 20px;
}

.tile p {
  padding: 0px 20px;
}

.heading {
  position: absolute;
  bottom: 50%;
  transform: translateY(50%);
  left: 20px;
  font-size: 48px;
  color: #FFF;
  transition: 0.3s ease-out;
}

.cover {
  position: absolute;
  height: 100%;
  width: 100%;
  bottom: 0;
  left: 0;
  transition: 0.3s ease-out;
}

.image {
  background-repeat: no-repeat;
  background-position: center center;
  position: absolute;
  background-size: contain;
  transform: translateY(50%);
  bottom: 50%;
  height: 100px;
  width: 100px;
  right: 20px;
  z-index: 1;
  transition: 0.3s ease-out;
}

.tile:hover .heading {
  font-size: 18px;
  bottom: 25px;
}

.tile:hover .cover {
  height: 50px;
}

.tile:hover .image {
  bottom: 25px;
  height: 50px;
  width: 50px;
}

.tile.teams .cover {
  background-color: #5558af;
}

.tile.teams .image {
  background-image: url('https://pbs.twimg.com/profile_images/873316258980036608/QXYh4F8U_400x400.jpg');
}

.tile.sharefile .cover {
  background-color: rgb(120, 190, 67);
}

.tile.sharefile .image {
  background-image: url('https://scontent-lga3-1.xx.fbcdn.net/v/t1.0-9/15492312_1165205733514842_9080917438899522212_n.png?_nc_cat=102&_nc_ht=scontent-lga3-1.xx&oh=8a7cc20034c8b7ee785a562ac889f16d&oe=5CEC8C39');
}