index.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Hancie e-Learning Studio</title>
</head>
<body>
<div class="site-content">
<h2 class="section-title">Hancie e-Learning Studio</h2>
<div class="project-list">
<div class="project">
<div class="project__card">
<a href="" class="project__image"><img src="http://unsplash.it/
600/400?image=189" width=600 height=400 alt=""></a>
<div class="project__detail">
<h2 class="project__title"><a href="#">Project Name</a></h2>
<small class="project__category"><a href="#">Photography</a></small>
</div>
</div>
</div>
<div class="project">
<div class="project__card">
<a href="" class="project__image"><img src="http://unsplash.it/
600/400?image=129" width=600 height=400 alt=""></a>
<div class="project__detail">
<h2 class="project__title"><a href="#">Project Name</a></h2>
<small class="project__category"><a href="#">Photography</a></small>
</div>
</div>
</div>
</div>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/
1.12.0/jquery.min.js"></script>
<style>
* {
box-sizing: border-box; }
*:before, *:after {
box-sizing: border-box; }
body {
font-family: karla, sans-serif;
line-height: 1.8;
color: #666; }
a {
text-decoration: none;
color: #9999ff; }
.site-content {
width: 990px;
max-width: 100%;
margin: 0 auto;
}
.site-content:after {
content: " ";
display: block;
clear: both; }
.section-title {
text-align: center;
text-transform: uppercase; }
.align-center {
text-align: center; }
.align-center h1 {
margin-top: 0; }
.share {
margin-bottom: 50px; }
.share span, .share a, .share iframe {
vertical-align: middle; }
.share span span, .share a span, .share iframe span {
vertical-align: middle !important;
width: 130px !important; }
.columns:after {
content: " ";
display: block;
clear: both; }
.columns .column {
width: 50%;
float: left;
min-height: 1px; }
.columns h2 {
margin-bottom: 20px;
line-height: 1; }
pre {
background-color: #fbfbfb;
padding: 10px; }
.project {
width: 50%;
float: left;
padding: 15px; }
.project-list:after {
content: " ";
display: block;
clear: both; }
.project__image {
display: block;
position: relative; }
.project__image img {
width: 100%;
max-width: 100%;
height: auto;
display: block; }
.project__image:after {
content: " ";
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
background: linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.4));
transition: opacity .3s ease;
opacity: 0; }
.project__card {
position: relative;
transition: box-shadow .3s ease;
box-shadow: 0 10px 30px transparent; }
.project__card.hover-in {
transition: -webkit-transform .2s ease-out;
transition: transform .2s ease-out;
transition: transform .2s ease-out, -webkit-transform .2s ease-out; }
.project__card.hover-out {
transition: -webkit-transform .2s ease-in;
transition: transform .2s ease-in;
transition: transform .2s ease-in, -webkit-transform .2s ease-in; }
.project:hover .project__card {
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4); }
.project:hover .project__image:after {
opacity: 1; }
.project:hover .project__detail {
border-width: 10px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4); }
.project:hover .project__title, .project:hover .project__category {
-webkit-transform: translateY(0) scale(1);
-ms-transform: translateY(0) scale(1);
transform: translateY(0) scale(1);
opacity: 1; }
.project:hover .project__title {
font-weight: 600;
margin-bottom: 0;
line-height: 1; }
.project__detail {
position: absolute;
left: 30px;
right: 30px;
top: 30px;
bottom: 30px;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
text-align: center;
-webkit-transform: translateZ(30px);
transform: translateZ(30px);
border: 0 solid #00BCD4;
transition: border .4s ease; }
.project__title {
margin: 0 0 10px;
font-size: 36px;
font-weight: 700;
transition: .4s ease;
opacity: 0;
-webkit-transform: translateY(40px) scale(0);
-ms-transform: translateY(40px) scale(0);
transform: translateY(40px) scale(0);
will-change: transform; }
.project__title a {
color: white; }
.project__category {
opacity: 0;
transition: .4s ease;
transition-delay: .1s;
-webkit-transform: translateY(40px) scale(0);
-ms-transform: translateY(40px) scale(0);
transform: translateY(40px) scale(0);
will-change: transform; }
.project__category a {
color: rgba(255, 255, 255, 0.8);
font-size: 1.3em; }
</style>
</body>
</html>
