<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/ */
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.