<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="shortcut icon" type="image/x-icon" href="https://static.codepen.io/assets/favicon/favicon-aec34940fbc1a6e787974dcd360f2c6b63348d4b1f4e06c77743096d55480f33.ico" />
<link rel="mask-icon" type="" href="https://static.codepen.io/assets/favicon/logo-pin-8f3771b1072e3c38bd662872f6b673a722f4b3ca2421637d5596661b4e2132cc.svg" color="#111" />
<title>CodePen - Portfolio Card</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<style>
@import url(https://fonts.googleapis.com/css?family=Montserrat:400,700);
@import url(https://fonts.googleapis.com/css?family=Lobster);
body {
color: #fff;
font-size: 1.15rem;
letter-spacing: 0.02rem;
font-family: "Lobster", sans-serif;
background-color: #ECF0F1;
}
hr {
margin: 0;
width: 320px;
border-color: rgba(255, 255, 255, 0.35);
}
.portfolio-card {
position: absolute;
top: 20%;
left: 25%;
height: 200px;
width: 350px;
border-radius: 10px;
background: url("http://ppcdn.500px.org/65542657/431d333918a6f9a6489961718e49e30131fea4ce/2048.jpg") no-repeat 0 0;
background-size: cover;
box-shadow: 0 0 2px 3px rgba(0, 0, 0, 0.15);
}
.dimmer {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: 10px;
background: linear-gradient(rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, 0.3));
}
.project-type {
position: absolute;
top: 8px;
right: 12px;
}
.fa {
color: #fff;
text-decoration: none;
}
.content {
position: absolute;
bottom: 0;
margin-left: 10px;
margin-bottom: 10px;
}
.title {
font-size: 1.5rem;
letter-spacing: 0.02em;
}
.description {
color: #bbb;
letter-spacing: 0;
font-family: "Montserrat", sans-serif;
font-size: 0.5rem;
}
.libraries {
margin: 3px 0;
padding: 0;
line-height: 10px;
}
.libraries li {
font-size: 0.5rem;
font-family: "Montserrat", sans-serif;
display: inline-block;
list-style-type: none;
margin: 0 5px;
padding: 4px;
border-radius: 3px;
background-color: #26C281;
}
.libraries li:hover {
transition: all 0.5s ease;
color: #333;
}
/* Lightbox CSS */
/* Preload images */
body:after {
content: url(../img/close.png) url(../img/loading.gif) url(../img/prev.png) url(../img/next.png);
display: none;
}
.lightboxOverlay {
position: absolute;
top: 0;
left: 0;
z-index: 9999;
background-color: black;
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
opacity: 0.8;
display: none;
}
.lightbox {
position: absolute;
left: 0;
width: 100%;
z-index: 10000;
text-align: center;
line-height: 0;
font-weight: normal;
}
.lightbox .lb-image {
display: block;
height: auto;
max-width: inherit;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
-ms-border-radius: 3px;
-o-border-radius: 3px;
border-radius: 3px;
}
.lightbox a img {
border: none;
}
.lb-outerContainer {
position: relative;
background-color: white;
*zoom: 1;
width: 250px;
height: 250px;
margin: 0 auto;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
-ms-border-radius: 4px;
-o-border-radius: 4px;
border-radius: 4px;
}
.lb-outerContainer:after {
content: "";
display: table;
clear: both;
}
.lb-container {
padding: 4px;
}
.lb-loader {
position: absolute;
top: 43%;
left: 0;
height: 25%;
width: 100%;
text-align: center;
line-height: 0;
}
.lb-cancel {
display: block;
width: 32px;
height: 32px;
margin: 0 auto;
background: url(../img/loading.gif) no-repeat;
}
.lb-nav {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
z-index: 10;
}
.lb-container > .nav {
left: 0;
}
.lb-nav a {
outline: none;
background-image: url("data:image/gif;base64,R0lGODlhAQABAPAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==");
}
.lb-prev, .lb-next {
height: 100%;
cursor: pointer;
display: block;
}
.lb-nav a.lb-prev {
width: 34%;
left: 0;
float: left;
background: url(../img/prev.png) left 48% no-repeat;
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
opacity: 0;
-webkit-transition: opacity 0.6s;
-moz-transition: opacity 0.6s;
-o-transition: opacity 0.6s;
transition: opacity 0.6s;
}
.lb-nav a.lb-prev:hover {
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
opacity: 1;
}
.lb-nav a.lb-next {
width: 64%;
right: 0;
float: right;
background: url(../img/next.png) right 48% no-repeat;
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
opacity: 0;
-webkit-transition: opacity 0.6s;
-moz-transition: opacity 0.6s;
-o-transition: opacity 0.6s;
transition: opacity 0.6s;
}
.lb-nav a.lb-next:hover {
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
opacity: 1;
}
.lb-dataContainer {
margin: 0 auto;
padding-top: 5px;
*zoom: 1;
width: 100%;
-moz-border-radius-bottomleft: 4px;
-webkit-border-bottom-left-radius: 4px;
border-bottom-left-radius: 4px;
-moz-border-radius-bottomright: 4px;
-webkit-border-bottom-right-radius: 4px;
border-bottom-right-radius: 4px;
}
.lb-dataContainer:after {
content: "";
display: table;
clear: both;
}
.lb-data {
padding: 0 4px;
color: #ccc;
}
.lb-data .lb-details {
width: 85%;
float: left;
text-align: left;
line-height: 1.1em;
}
.lb-data .lb-caption {
font-size: 13px;
font-weight: bold;
line-height: 1em;
}
.lb-data .lb-number {
display: block;
clear: left;
padding-bottom: 1em;
font-size: 12px;
color: #999999;
}
.lb-data .lb-close {
display: block;
float: right;
width: 30px;
height: 30px;
background: url(../img/close.png) top right no-repeat;
text-align: right;
outline: none;
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=70);
opacity: 0.7;
-webkit-transition: opacity 0.2s;
-moz-transition: opacity 0.2s;
-o-transition: opacity 0.2s;
transition: opacity 0.2s;
}
.lb-data .lb-close:hover {
cursor: pointer;
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
opacity: 1;
}
</style>
<script>
window.console = window.console || function(t) {};
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<script>
if (document.location.search.match(/type=embed/gi)) {
window.parent.postMessage("resize", "*");
}
</script>
</head>
<body translate="no">
<link href='//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css' rel='stylesheet'>
<div class='portfolio-card'>
<div class='dimmer'></div>
<div class='project-type'>
<a class='fa fa-camera' data-lightbox='image-1' data-title='short description of the project (or date)' href="https://ppcdn.500px.org/65542657/431d333918a6f9a6489961718e49e30131fea4ce/2048.jpg"></a>
</div>
<div class='content'>
<div class='title'>Portfolio Card</div>
<hr>
<div class='description'>short description of the project</div>
<ul class='libraries'>
<li>RAW</li>
<li>Photoshop CC</li>
</ul>
</div>
</div>
<script src="https://static.codepen.io/assets/common/stopExecutionOnTimeout-de7e2ef6bfefd24b79a3f68b414b87b8db5b08439cac3f1012092b2290c719cd.js"></script>
<script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script id="rendered-js">
/**
* Lightbox v2.7.1
* by Lokesh Dhakar - http://lokeshdhakar.com/projects/lightbox2/
*
* @license http://creativecommons.org/licenses/by/2.5/
* - Free for use in both personal and commercial projects
* - Attribution requires leaving author name, author link, and the license info intact
*/
(function () {var a = jQuery,b = function () {function a() {this.fadeDuration = 500, this.fitImagesInViewport = !0, this.resizeDuration = 700, this.positionFromTop = 50, this.showImageNumberLabel = !0, this.alwaysShowNavOnTouchDevices = !1, this.wrapAround = !1;}return a.prototype.albumLabel = function (a, b) {return "Image " + a + " of " + b;}, a;}(),c = function () {function b(a) {this.options = a, this.album = [], this.currentImageIndex = void 0, this.init();}return b.prototype.init = function () {this.enable(), this.build();}, b.prototype.enable = function () {var b = this;a("body").on("click", "a[rel^=lightbox], area[rel^=lightbox], a[data-lightbox], area[data-lightbox]", function (c) {return b.start(a(c.currentTarget)), !1;});}, b.prototype.build = function () {var b = this;a("<div id='lightboxOverlay' class='lightboxOverlay'></div><div id='lightbox' class='lightbox'><div class='lb-outerContainer'><div class='lb-container'><img class='lb-image' src='' /><div class='lb-nav'><a class='lb-prev' href='' ></a><a class='lb-next' href='' ></a></div><div class='lb-loader'><a class='lb-cancel'></a></div></div></div><div class='lb-dataContainer'><div class='lb-data'><div class='lb-details'><span class='lb-caption'></span><span class='lb-number'></span></div><div class='lb-closeContainer'><a class='lb-close'></a></div></div></div></div>").appendTo(a("body")), this.$lightbox = a("#lightbox"), this.$overlay = a("#lightboxOverlay"), this.$outerContainer = this.$lightbox.find(".lb-outerContainer"), this.$container = this.$lightbox.find(".lb-container"), this.containerTopPadding = parseInt(this.$container.css("padding-top"), 10), this.containerRightPadding = parseInt(this.$container.css("padding-right"), 10), this.containerBottomPadding = parseInt(this.$container.css("padding-bottom"), 10), this.containerLeftPadding = parseInt(this.$container.css("padding-left"), 10), this.$overlay.hide().on("click", function () {return b.end(), !1;}), this.$lightbox.hide().on("click", function (c) {return "lightbox" === a(c.target).attr("id") && b.end(), !1;}), this.$outerContainer.on("click", function (c) {return "lightbox" === a(c.target).attr("id") && b.end(), !1;}), this.$lightbox.find(".lb-prev").on("click", function () {return b.changeImage(0 === b.currentImageIndex ? b.album.length - 1 : b.currentImageIndex - 1), !1;}), this.$lightbox.find(".lb-next").on("click", function () {return b.changeImage(b.currentImageIndex === b.album.length - 1 ? 0 : b.currentImageIndex + 1), !1;}), this.$lightbox.find(".lb-loader, .lb-close").on("click", function () {return b.end(), !1;});}, b.prototype.start = function (b) {function c(a) {d.album.push({ link: a.attr("href"), title: a.attr("data-title") || a.attr("title") });}var d = this,e = a(window);e.on("resize", a.proxy(this.sizeOverlay, this)), a("select, object, embed").css({ visibility: "hidden" }), this.sizeOverlay(), this.album = [];var f,g = 0,h = b.attr("data-lightbox");if (h) {f = a(b.prop("tagName") + '[data-lightbox="' + h + '"]');for (var i = 0; i < f.length; i = ++i) {if (window.CP.shouldStopExecution(0)) break;c(a(f[i])), f[i] === b[0] && (g = i);}window.CP.exitedLoop(0);} else if ("lightbox" === b.attr("rel")) c(b);else {f = a(b.prop("tagName") + '[rel="' + b.attr("rel") + '"]');for (var j = 0; j < f.length; j = ++j) {if (window.CP.shouldStopExecution(1)) break;c(a(f[j])), f[j] === b[0] && (g = j);}window.CP.exitedLoop(1);}var k = e.scrollTop() + this.options.positionFromTop,l = e.scrollLeft();this.$lightbox.css({ top: k + "px", left: l + "px" }).fadeIn(this.options.fadeDuration), this.changeImage(g);}, b.prototype.changeImage = function (b) {var c = this;this.disableKeyboardNav();var d = this.$lightbox.find(".lb-image");this.$overlay.fadeIn(this.options.fadeDuration), a(".lb-loader").fadeIn("slow"), this.$lightbox.find(".lb-image, .lb-nav, .lb-prev, .lb-next, .lb-dataContainer, .lb-numbers, .lb-caption").hide(), this.$outerContainer.addClass("animating");var e = new Image();e.onload = function () {var f, g, h, i, j, k, l;d.attr("src", c.album[b].link), f = a(e), d.width(e.width), d.height(e.height), c.options.fitImagesInViewport && (l = a(window).width(), k = a(window).height(), j = l - c.containerLeftPadding - c.containerRightPadding - 20, i = k - c.containerTopPadding - c.containerBottomPadding - 120, (e.width > j || e.height > i) && (e.width / j > e.height / i ? (h = j, g = parseInt(e.height / (e.width / h), 10), d.width(h), d.height(g)) : (g = i, h = parseInt(e.width / (e.height / g), 10), d.width(h), d.height(g)))), c.sizeContainer(d.width(), d.height());}, e.src = this.album[b].link, this.currentImageIndex = b;}, b.prototype.sizeOverlay = function () {this.$overlay.width(a(window).width()).height(a(document).height());}, b.prototype.sizeContainer = function (a, b) {function c() {d.$lightbox.find(".lb-dataContainer").width(g), d.$lightbox.find(".lb-prevLink").height(h), d.$lightbox.find(".lb-nextLink").height(h), d.showImage();}var d = this,e = this.$outerContainer.outerWidth(),f = this.$outerContainer.outerHeight(),g = a + this.containerLeftPadding + this.containerRightPadding,h = b + this.containerTopPadding + this.containerBottomPadding;e !== g || f !== h ? this.$outerContainer.animate({ width: g, height: h }, this.options.resizeDuration, "swing", function () {c();}) : c();}, b.prototype.showImage = function () {this.$lightbox.find(".lb-loader").hide(), this.$lightbox.find(".lb-image").fadeIn("slow"), this.updateNav(), this.updateDetails(), this.preloadNeighboringImages(), this.enableKeyboardNav();}, b.prototype.updateNav = function () {var a = !1;try {document.createEvent("TouchEvent"), a = this.options.alwaysShowNavOnTouchDevices ? !0 : !1;} catch (b) {}this.$lightbox.find(".lb-nav").show(), this.album.length > 1 && (this.options.wrapAround ? (a && this.$lightbox.find(".lb-prev, .lb-next").css("opacity", "1"), this.$lightbox.find(".lb-prev, .lb-next").show()) : (this.currentImageIndex > 0 && (this.$lightbox.find(".lb-prev").show(), a && this.$lightbox.find(".lb-prev").css("opacity", "1")), this.currentImageIndex < this.album.length - 1 && (this.$lightbox.find(".lb-next").show(), a && this.$lightbox.find(".lb-next").css("opacity", "1"))));}, b.prototype.updateDetails = function () {var b = this;"undefined" != typeof this.album[this.currentImageIndex].title && "" !== this.album[this.currentImageIndex].title && this.$lightbox.find(".lb-caption").html(this.album[this.currentImageIndex].title).fadeIn("fast").find("a").on("click", function () {location.href = a(this).attr("href");}), this.album.length > 1 && this.options.showImageNumberLabel ? this.$lightbox.find(".lb-number").text(this.options.albumLabel(this.currentImageIndex + 1, this.album.length)).fadeIn("fast") : this.$lightbox.find(".lb-number").hide(), this.$outerContainer.removeClass("animating"), this.$lightbox.find(".lb-dataContainer").fadeIn(this.options.resizeDuration, function () {return b.sizeOverlay();});}, b.prototype.preloadNeighboringImages = function () {if (this.album.length > this.currentImageIndex + 1) {var a = new Image();a.src = this.album[this.currentImageIndex + 1].link;}if (this.currentImageIndex > 0) {var b = new Image();b.src = this.album[this.currentImageIndex - 1].link;}}, b.prototype.enableKeyboardNav = function () {a(document).on("keyup.keyboard", a.proxy(this.keyboardAction, this));}, b.prototype.disableKeyboardNav = function () {a(document).off(".keyboard");}, b.prototype.keyboardAction = function (a) {var b = 27,c = 37,d = 39,e = a.keyCode,f = String.fromCharCode(e).toLowerCase();e === b || f.match(/x|o|c/) ? this.end() : "p" === f || e === c ? 0 !== this.currentImageIndex ? this.changeImage(this.currentImageIndex - 1) : this.options.wrapAround && this.album.length > 1 && this.changeImage(this.album.length - 1) : ("n" === f || e === d) && (this.currentImageIndex !== this.album.length - 1 ? this.changeImage(this.currentImageIndex + 1) : this.options.wrapAround && this.album.length > 1 && this.changeImage(0));}, b.prototype.end = function () {this.disableKeyboardNav(), a(window).off("resize", this.sizeOverlay), this.$lightbox.fadeOut(this.options.fadeDuration), this.$overlay.fadeOut(this.options.fadeDuration), a("select, object, embed").css({ visibility: "visible" });}, b;}();a(function () {{var a = new b();new c(a);}});}).call(this);
//# sourceURL=pen.js
</script>
</body>
</html>
