<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <figure class="project_item"> <figcaption> <h3 class="project_kind">illustration</h3> </figcaption><a class="project_link" href="#"> → </a> </figure> <figure class="project_item"> <figcaption> <h3 class="project_kind">logo</h3> </figcaption><a class="project_link" href="#"> → </a> </figure> </div>

/* white - beige*/ /* gray-black*/ /* gray-black*/ /* gray-black*/ * { box-sizing: border-box; } body { min-height: 100%; font-family: "Poiret One", sans-serif; font-size: 16px; background: #FFF5EE; color: #40484b; letter-spacing: .8px; overflow-x: hidden; } .container { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; width: 90%; margin: auto; } a { display: inline-block; color: #40484b; text-decoration: none; outline: none; } .project_item { position: relative; width: 49%; height: 270px; overflow: hidden; margin: 15px 5px; background: #DDC8AD; box-shadow: 0 0 20px rgba(64, 72, 75, 0.2); -webkit-transform: translateZ(0); transform: translateZ(0); -webkit-transition: all 0.45s ease; transition: all 0.45s ease; } .project_item * { -webkit-transition: all 0.45s ease; transition: all 0.45s ease; } .project_item::before, .project_item::after { content: ""; position: absolute; top: 0; bottom: 0; left: 0; right: 0; background-color: #FFF5EE; box-shadow: 0 0 20px rgba(64, 72, 75, 0.7); opacity: 0.2; -webkit-transition: all 0.45s ease; transition: all 0.45s ease; } .project_item::before { -webkit-transform: skew(30deg) translateX(-80%); transform: skew(30deg) translateX(-80%); } .project_item::after { -webkit-transform: skew(-30deg) translateX(-65%); transform: skew(-30deg) translateX(-65%); } .project_item figcaption { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; height: 100%; } .project_item figcaption::before, .project_item figcaption::after { content: ""; position: absolute; top: 0; bottom: 0; left: 0; right: 0; background-color: #FFF5EE; box-shadow: 0 0 20px rgba(64, 72, 75, 0.7); opacity: 0.2; -webkit-transition: all 0.45s ease; transition: all 0.45s ease; z-index: -1; } .project_item figcaption::before { -webkit-transform: skew(30deg) translateX(-100%); transform: skew(30deg) translateX(-100%); } .project_item figcaption::after { -webkit-transform: skew(-30deg) translateX(-90%); transform: skew(-30deg) translateX(-90%); } .project_kind { position: relative; font-size: 1.2rem; text-transform: uppercase; z-index: 10; } .project_link { position: absolute; right: 10px; bottom: 10px; -webkit-transition: all 0.45s ease; transition: all 0.45s ease; z-index: 1; } .project_link::before, .project_link::after { content: ""; position: absolute; top: 0; bottom: 0; left: 0; right: 0; background-color: #FFF5EE; box-shadow: 0 0 20px rgba(64, 72, 75, 0.7); opacity: 0.2; -webkit-transition: all 0.45s ease; transition: all 0.45s ease; width: 500px; height: 500px; box-shadow: 0 0px 20px rgba(64, 72, 75, 0.2); z-index: -1; } .project_link::before { -webkit-transform: skew(-30deg) translateY(7.5%) translateX(-90%); transform: skew(-30deg) translateY(7.5%) translateX(-90%); } .project_link::after { -webkit-transform: skew(-30deg) translateX(-9%) translateY(-24%); transform: skew(-30deg) translateX(-9%) translateY(-24%); } .project_item:hover .project_kind { -webkit-transform: translateX(2rem); transform: translateX(2rem); -webkit-transition-delay: 0.2s; transition-delay: 0.2s; } .project_item:hover:before { -webkit-transform: skew(30deg) translateX(-20%); transform: skew(30deg) translateX(-20%); -webkit-transition-delay: 0.05s; transition-delay: 0.05s; } .project_item:hover:after { -webkit-transform: skew(-30deg) translateX(-10%); transform: skew(-30deg) translateX(-10%); } .project_item:hover figcaption::before { -webkit-transform: skew(30deg) translateX(-40%); transform: skew(30deg) translateX(-40%); -webkit-transition-delay: 0.15s; transition-delay: 0.15s; } .project_item:hover figcaption::after { -webkit-transform: skew(-30deg) translateX(-30%); transform: skew(-30deg) translateX(-30%); -webkit-transition-delay: 0.1s; transition-delay: 0.1s; } .project_item:hover .project_link { bottom: 30%; right: 50%; -webkit-transition-delay: 0.2s; transition-delay: 0.2s; } @media (max-width: 768px) { .container { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .project_item { width: 88%; margin: 15px auto; } }