<div class="container">
  <div class="main_title">TOP 3 SCORER OF WORLD CUP 2014<br>  <span>Hover them to reveal who they are and how many goals they have done.</span></div>
<div class="player colombia">
  <div class="inner"></div> 
  <img src="http://www.iltourdinibali.it/codepens/james.jpg" />
  <div class="hover">
    <span class="amount">6</span>
    <span class="name">James Rodriguez</span>
    <span class="nationality">Colombia</span>
  </div>
</div>
<div class="player germany">
  <div class="inner"></div> 
  <img src="http://www.iltourdinibali.it/codepens/mueller.jpg" />
  <div class="hover">
    <span class="amount">5</span>
    <span class="name">Thomas Mueller</span>
    <span class="nationality">Germany</span>
  </div>
</div>
<div class="player brazil last">
  <div class="inner"></div> 
  <img src="http://www.iltourdinibali.it/codepens/neymar.jpg" />
  <div class="hover">
    <span class="amount">4</span>
    <span class="name">Neymar jr.</span>
    <span class="nationality">Brazil</span>
  </div>
 </div>
</div>
@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,300,700);
$widthplayer: 216px;
$heightplayer: 300px;
$marginright: 50px;
$primarycolombia: rgba(239,214,52,1);
$secondarycolombia: rgba(23,40,61,1);
$primarybrazil: rgba(236,208,82,1);
$secondarybrazil: rgba(40,125,70,1);
$primarygermany: rgba(186,14,38,1);
$secondarygermany: rgba(5,5,5,1);


@mixin gradient($color1, $color2) {
  background: linear-gradient(135deg,  $color1 0%, $color2 87%); 
  background: -webkit-linear-gradient(-45deg, $color1 0%, $color2 87%); 
}
@mixin animatingall($time) {
  -webkit-transition: all $time ;
          transition: all $time ;
}

*{
  border-box:box-sizing;
}
body, html{
  background: #424242;
  font-family: 'Open Sans', sans-serif;
}
.container{
  width: $widthplayer * 3 + $marginright * 2;
  margin: 0 auto;  
}
.main_title{
  font-size: 40px;
  font-weight: 800;
  line-height: 23px;
  text-align: center;
  margin-top: 50px;
  margin-bottom: 50px;
  color:white;
}
 span{
   font-weight:300;
   font-size: 15px;
 }
.last{
  margin:0 !important;
}
.player{
  width: $widthplayer;
  height: $heightplayer;
  background: red;
  position: relative;
  margin-right: $marginright;
  z-index: 2;
  float:left;
  cursor: pointer;
}
.player img{
  z-index:20;
  position: relative;
}
.inner{
  width: $widthplayer;
  height: $heightplayer;
  @include animatingall(0.4s);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform:  translate(-50%, -50%);
  z-index: 1;
 }
.colombia .inner{
  @include gradient($primarycolombia,$secondarycolombia);
}
.brazil .inner{
  @include gradient($primarybrazil,$secondarybrazil);
}
.germany .inner{
  @include gradient($primarygermany,$secondarygermany);
}

.hover{
  width: $widthplayer;
  height: $heightplayer;
  background: rgba(33,33,33,0.8);
  position: absolute;
  top: 0;
  left: 0;
  z-index: 50;
  opacity: 0;
  @include animatingall(0.4s);  
  text-align: center;
} 
.name, .amount, .nationality{
  display:block;
  color:white;
  @include animatingall(0.8s);
  opacity: 0;    
}
.amount{
  font-size: 200px;
  line-height: 180px;
  font-weight:800;
  margin-top: 20px;
}
.colombia .amount{
  color: $primarycolombia;
}
.brazil .amount{
  color: $primarybrazil;
}
.germany .amount{
  color: $primarygermany;
}
.name{
  margin-top: 70px;
  font-weight:700;
  text-transform: uppercase;
}
.player:hover .hover{
  opacity: 1;
}
.player:hover .inner{
  width: $widthplayer + 20px;
  height: $heightplayer + 20px;
}
.player:hover .name{
  opacity: 1;
  margin-top: 10px;
}
.player:hover .amount{
  opacity: 1;
  margin-top: 40px;
}
.player:hover .nationality{
  opacity: 1;
}

View Compiled
/* CHECK ALL MY PENS HERE -> https://codepen.io/dghez/ */

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.