From dd25dba0ef9ad69d91da1f5c7dea53b666f23be6 Mon Sep 17 00:00:00 2001 From: "Diego F. Goberna" Date: Fri, 28 Sep 2018 01:55:37 +0200 Subject: [PATCH] added screenshots zoom --- about/index.html | 36 +++++++++++++++++++++++++----------- about/style.css | 31 +++++++++++++++++++++++++++++-- 2 files changed, 54 insertions(+), 13 deletions(-) diff --git a/about/index.html b/about/index.html index 2783e4f..0765646 100644 --- a/about/index.html +++ b/about/index.html @@ -28,14 +28,28 @@ - +var lb; +function setupLb(){ + lb = document.getElementById('lightbox'); + var sshots = document.querySelectorAll('.screenshots>img'); + for (var i = 0; i < sshots.length; i++){ + sshots[i].addEventListener('click', showImg); + } +} +function showImg(ev){ + lb.querySelector('img').src = ev.target.src; + lb.classList.add('opened'); +} +function closeLb(){ + lb.classList.remove('opened') +} + - +
+
@@ -58,9 +72,9 @@ is a lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc efficitur et libero id interdum. Aenean id mauris cursus, fermentum lorem nec, congue nisi. Suspendisse semper vitae nisi a interdum. In finibus magna mi. Pellentesque sit amet diam dolor. Sed in venenatis magna.

- - - + + +
@@ -81,9 +95,9 @@
- - - + + +
diff --git a/about/style.css b/about/style.css index dd0f437..b6ad8d5 100644 --- a/about/style.css +++ b/about/style.css @@ -18,7 +18,31 @@ body{ background-size: contain; z-index: -1; } - +#lightbox{ + cursor: pointer; + position: fixed; + top: 0; + left: 0; + width: 100vw; + height: 100vh; + background: rgba(0, 0, 0, 0.8); + z-index: 999999; + opacity: 0; + display: none; + align-items: center; + justify-content: center; + transition: opacity 3s; +} +#lightbox.opened{ + display: flex; + opacity: 1; +} +#lightbox img{ + width: 100%; + max-width: 1000px; + border: 1px solid #005a83; + box-shadow: 0 0 25px rgba(144, 226, 222, 0.6); +} #all{ width: 95%; min-width: 360px; @@ -191,6 +215,9 @@ footer{ width: 100%; transition: box-shadow 120ms, border-color 120ms, transform 120ms; } +.screenshots>img{ + width: 30%; +} .screenshots img:hover{ box-shadow: 0 0 30px rgba(144, 226, 222, 0.8); border-color: white; @@ -245,7 +272,7 @@ h1 span{ h3{ margin-bottom: 3%; } - .screenshots a{ + .screenshots>img, .screenshots>a{ display: block; width: 100%; margin: 5% 0;