<div class="grid">
  <div  class="grid-item grid-item-1">
  <div class="grid-content">
    <h1>Westbrook</h1>
    <p>Is an American professional basketball player for the Oklahoma City Thunder of the NBA.</p>
    <a href="#">x</a>
  </div>
 </div> 
<div  class="grid-item grid-item-2">
 <div class="grid-content">
  <h1>Westbrook</h1>
   <p>Two-time NBA All-Star Game Most Valuable Player, winning consecutive awards in 2015 and 2016.</p>
    <a href="#">x</a>
  </div>
 </div> 
 <div  class="grid-item grid-item-3">
 <div class="grid-content">
  <h1>Westbrook card</h1>
   <p>One of two players in NBA history to average a triple-double for a season.</p>
    <a href="#">x</a>
  </div>
 </div> 
 
 <div  class="grid-item grid-item-4">
 <div class="grid-content">
  <h1>Westbrook MVP</h1>
   <p>He also set a record for the most triple-doubles in a season, with 42</p>
    <a href="#">x</a>
  </div>
 </div> 
</div>

body{
  background-color:#ffcccc;
}
.grid{
  width:800px;
  height:500px;
  background-color:#ccffff;
  margin:20px auto 0;
  display:grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-gap: 20px;
}
.grid-item {
  height: 500px;
  box-sizing: border-box;
  position: relative;
  transition: .2s ease;
  opacity: .9;
}
.grid-item-1 {
  background: url(https://pre00.deviantart.net/11b6/th/pre/i/2015/093/1/9/russell_westbrook___the_liftoff_by_ronan_ncy-d8o7uum.jpg)no-repeat center center;
  background-size: cover;
}

.grid-item-2 {
  background: url(https://i.pinimg.com/originals/cd/fc/07/cdfc073462a97ac8c5c458dd9f2b048e.jpg)no-repeat center center;
  background-size: cover;
}

.grid-item-3 {
  background: url(https://i.pinimg.com/736x/10/e0/77/10e07754cb43268929cb21d6a12f4426.jpg)no-repeat center center;
  background-size: cover;
}
.grid-item-4 {
  background: url(https://i.pinimg.com/originals/41/f2/8b/41f28bbb6fea4da9d7f51fb4a0883431.jpg)no-repeat center center;
  background-size: cover;
}
.grid-content {
  position: absolute;
  bottom: 0;
  width: 180px;
  height: 150px;
  background:#ccffff;
  box-sizing: border-box;
  padding: 10px;
}
.grid-item:hover {
  box-shadow: 0px 30px 46px -18px rgba(0,0,0,1);
-webkit-box-shadow: 0px 30px 46px -18px rgba(0,0,0,1);
-moz-box-shadow: 0px 30px 46px -18px rgba(0,0,0,1);
  margin-top: -20px;
  opacity: 3;
}
h1{
  text-align:center;
  font-size:20px;
  margin-top:10px;
}
p{
  text-align:center;
}
a {
  text-decoration: none;
  display: inline-block;
  color: white;
  background: black;
  padding: 0 5px;
  position: absolute;
  right: 0;
  top: 0;
  font-weight: bold;
  transition: .5s ease;
}

a:hover {
  background: black;
}