Preview
Source Code
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- This script got from www.devanswer.com -->
<style>
html {
box-sizing: border-box;
}
*,
*::after,
*::before {
box-sizing: inherit
}
body, html {
margin: 0;
padding: 0;
width: 100%;
font-size: 1.4em;
background-color: #111;
}
h1, h3, p {
margin: 0;
padding: 0;
}
a {
text-decoration: none;
color: white;
}
header {
text-align: center;
padding: 1em;;
font-family: helvetica, arial, sans-serif;
color: #f9f9f9;
text-transform: uppercase;
}
.projects {
display: flex;
flex-flow: row wrap;
}
.thumb {
flex-basis: 25%;
max-width: 25%;
position: relative;
cursor: pointer;
}
.thumb-holder {
position: relative;
height: 0;
min-width: 100%;
padding-bottom: 75%;
}
.thumb-placeholder {
background-size: cover;
background-position: center;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
.thumb-title {
display: flex;
justify-content: center;
align-items: center;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: transparent;
transition: background-color .2s cubic-bezier(.6,0,1,.6) .1s;
}
.thumb-title:hover {
background-color: #111;
transition: background-color .2s cubic-bezier(0,.3,.5,1);
}
.thumb-title h1 {
display: flex;
overflow: hidden;
}
.thumb-title span {
transform: translateY(100%);
transform-origin: 0 100%;
opacity: 0;
transition: transform .8s cubic-bezier(0.37, 0.31, 0, 1),
opacity .8s cubic-bezier(0.37, 0.31, 0, 1);
}
.thumb-title:hover span {
transform: translateY(0);
opacity: 1;
transition: transform .8s cubic-bezier(0.37, 0.31, 0.2, 0.85) .1s,
opacity .8s cubic-bezier(0, 0.6, 0.1, 1) .1s;
}
</style>
</head>
<body>
<section class="projects">
<article class="thumb">
<div class="thumb-holder">
<div class="thumb-placeholder" style="background-image: url('https://devanswer.com/img/nexus-5-mockup.jpg');"> </div>
<a href="#" class="thumb-title"><h1><span>UI</span></h1></a>
</div>
</article>
<article class="thumb">
<div class="thumb-holder">
<div class="thumb-placeholder" style="background-image: url('https://devanswer.com/img/1-20.jpg');"> </div>
<a href="#" class="thumb-title"><h1><span>UX</span></h1></a>
</div>
</article>
<article class="thumb">
<div class="thumb-holder">
<div class="thumb-placeholder" style="background-image: url('https://devanswer.com/img/nexus-5-mockup.jpg');"> </div>
<a href="#" class="thumb-title"><h1><span>CSS</span></h1></a>
</div>
</article>
<article class="thumb">
<div class="thumb-holder">
<div class="thumb-placeholder" style="background-image: url('https://devanswer.com/img/1-20.jpg');"> </div>
<a href="#" class="thumb-title"><h1><span>JS</span></h1></a>
</div>
</article>
</section><div id="bcl"><a style="font-size:8pt;text-decoration:none;" href="http://www.devanswer.com">Developers Answer</a></div>
</body>
</html>