<div class='container'>
<div class="row">
<div class="col-md-12">
<h1 class="text-center">My Top Six Basketball Teams</h1>
<ul>
<li class="col-md-3">
<div class='front'></div>
<div class='back'>
<img src='https://i.pinimg.com/originals/13/b3/57/13b357a4989873b84615bf3dd6c42196.jpg'>
</div>
</li>
<li class="col-md-3">
<div class='front'></div>
<div class='back'>
<img src='https://images.homedepot-static.com/productImages/f7c5f737-51ed-47e0-b84d-80ea97446447/svn/black-applied-icon-wall-decals-nbop0303-64_600.jpg'>
</div>
</li>
<li class="col-md-3">
<div class='front'></div>
<div class='back'>
<img src='https://img.pngio.com/milwaukee-bucks-logopng-bucks-logo-png-200_248.png'>
</div>
</li>
<li class="col-md-3">
<div class='front'></div>
<div class='back'>
<img src='https://i.pinimg.com/originals/33/90/3d/33903d33d2a9ae0f3273e9a1daa1e718.jpg'>
</div>
</li>
<li class="col-md-3">
<div class='front'></div>
<div class='back'>
<img src='https://cdn.worldvectorlogo.com/logos/utah-jazz.svg'>
</div>
</li>
<li class="col-md-3">
<div class='front'></div>
<div class='back'>
<img src='https://cdn.lowgif.com/full/3ee0f280e012c479-philadelphia-76ers-new-logo-concept-by-matthew-harvey.gif'>
</div>
</li>
</ul>
</div>
</div>
</div>
@import
url('https://fonts.googleapis.com/css2?family=Press+Start+2P&family=Rye&family=Shojumaru&display=swap');
body {
width: 100%;
height: 100%;
background: url("https://s3.amazonaws.com/ritalbradley-dev-photos/twinkle-back.gif");
}
.container {
max-width: 60%;
float: none;
margin: 0 auto;
display: flex;
justify-content: center;
}
body:before {
width: 100%;
height: 100%;
content: '';
position: fixed;
top: 0;
left: 0;
z-index: -1;
background-image: -moz-linear-gradient(top left, rgba(29, 38, 113, 0.60), rgba(195, 55, 100, 0.60));
background-image: -ms-linear-gradient(top left, rgba(29, 38, 113, 0.60), rgba(195, 55, 100, 0.60));
background-image: -webkit-linear-gradient(top left, rgba(29, 38, 113, 0.60), rgba(195, 55, 100, 0.60));
background-image: -o-linear-gradient(top left, rgba(29, 38, 113, 0.60), rgba(195, 55, 100, 0.60));
background-image: linear-gradient(to bottom right, rgba(29, 38, 113, 0.60), rgba(195, 55, 100, 0.60));
background-size: auto;
}
h1 {
color: #fff;
font-family: 'Shojumaru', cursive;
font-size: 55px;
text-align: center;
text-shadow: 2px 2px 10px #1D2671, 4px 4px 15px #C33764, ;
}
ul {
perspective: 600;
margin: 0 auto;
}
li {
width: 200px;
height: 200px;
float: left;
list-style: none;
margin-right: 20px;
margin-bottom: 50px;
position: relative;
cursor: pointer;
counter-increment: item;
div {
width: 100%;
height: 100%;
position: absolute;
border-radius: 5px;
transition: all .5s;
backface-visibility: hidden;
box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.30);
}
img {
width: 100%;
height: 100%;
position: absolute;
border-radius: 5px;
object-fit: cover;
}
&:hover .front {
z-index: 0;
transform: rotateY(180deg);
}
&:hover .back {
transform: rotateY(0);
}
}
.front {
z-index: 3;
color: #333;
text-align: center;
line-height: 200px;
font-size: 80px;
font-family: 'Faster One', cursive;
background: #C33764;
background: -webkit-linear-gradient(45deg, #1D2671 10%, #C33764 80%);
background: linear-gradient(45deg, #1D2671 10%, #C33764 80%);
&:after {
content: counter(item);
}
}
.back {
transform: rotateY(180deg);
}
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.