Skip to content

Instantly share code, notes, and snippets.

@mohammed-ghouse
Created July 2, 2018 06:55
Show Gist options
  • Save mohammed-ghouse/c3117803a4398b317b70ef80888387d1 to your computer and use it in GitHub Desktop.
Save mohammed-ghouse/c3117803a4398b317b70ef80888387d1 to your computer and use it in GitHub Desktop.
LoL Champion Roster - Flexbox
.wrapper
.item.ryze
.item.irelia
.item.jinx
.item.katarina
.item.ziggs
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
$ryze: "http://lolwp.com/wp-content/uploads/Dark-Crystal-Ryze.jpg";
$irelia: "http://lolwp.com/wp-content/uploads/Irelia-fanart.jpg";
$jinx: "http://lolwp.com/wp-content/uploads/2013/09/Jinx-Classic.jpg";
$katarina: "http://lolwp.com/wp-content/uploads/Mercenary-Katarina-Updated.jpg";
$ziggs: "http://lolwp.com/wp-content/uploads/Ziggs_Splash_0.jpg";
@import url(https://fonts.googleapis.com/css?family=Raleway:100,300);
* {
margin: 0;
padding: 0;
border: 0;
outline: 0;
box-sizing: border-box;
}
html, body {
height: 100%;
}
.wrapper {
display: flex;
flex-direction: row;
align-items: stretch;
height: 100%;
.item {
display: flex;
flex-grow: 1;
transition: all .5s ease;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
position: relative;
overflow: hidden;
&:hover {
flex-grow: 4;
box-shadow: inset 0 0 20px #000;
}
&:after {
content: "";
width: 200%;
height: 43.33%;
background-color: rgba(#000, 0.75);
left: -50%;
bottom: -10%;
position: absolute;
transform: rotate(-15deg);
color: #fff;
text-align: center;
padding-top: 20px;
text-transform: uppercase;
font-size: 40px;
font-family: 'Raleway';
font-weight: 100;
}
&.ryze {
background-image: url($ryze);
background-position: 70% center;
&:after {
content: "Ryze";
}
}
&.irelia {
background-image: url($irelia);
background-position: 45% center;
&:after {
content: "Irelia";
}
}
&.jinx {
background-image: url($jinx);
background-position: 70% center;
&:after {
content: "Jinx";
}
}
&.katarina {
background-image: url($katarina);
background-position: 70% center;
&:after {
content: "Katarina";
}
}
&.ziggs {
background-image: url($ziggs);
background-position: 75% center;
&:after {
content: "Ziggs";
}
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment